So implementieren Sie Reisenavigation und Routenplanung in uniapp

So implementieren Sie Reisenavigation und Routenplanung in uniapp

Mit der Verbesserung des Lebensstandards der Menschen sind Reisenavigation und Routenplanung zu einem unverzichtbaren Bestandteil der modernen Gesellschaft geworden. Die Implementierung der Reisenavigation und Routenplanung in Uniapp ist nicht kompliziert. In diesem Artikel werden die spezifischen Schritte zur Implementierung dieser Funktionen über Uniapp und zugehörige Plug-Ins vorgestellt und Codebeispiele bereitgestellt.

1. Kartenkomponenten und Navigations-Plug-Ins einführen
Zuerst müssen wir Kartenkomponenten und Navigations-Plug-Ins in Uniapp einführen. Zu den aktuellen Mainstream-Navigations-Plug-Ins gehören Baidu Map und Amap. In uniapp können wir die beiden Plug-ins uni-app-baidumap und uni-app-amap nutzen, um Navigations- und Routenplanungsfunktionen zu implementieren.

1.1 Einführung des Baidu-Karten-Plug-Ins
Installieren Sie im Stammverzeichnis des Uniapp-Projekts das Uni-App-Baidumap-Plug-In über npm:

npm install uni-app-baidumap

Führen Sie anschließend das Plug-In in die Datei main.js ein das Stammverzeichnis:

import baiduMap from 'uni-app-baidumap';
Vue.use(baiduMap, {
    ak: 'your baidu map ak'
});

Unter diesen muss „Ihr Baidu-Karten-AK“ durch Ihren eigenen AK (Schlüssel) der Baidu-Karten-API ersetzt werden. Auf diese Weise wurde das Baidu-Karten-Plugin erfolgreich eingeführt.

1.2 Einführung des AMAP-Plug-Ins
Installieren Sie im Stammverzeichnis des Uniapp-Projekts das Uni-App-Amap-Plug-In über npm:

npm install uni-app-amap

Führen Sie anschließend das Plug-In in die Datei main.js ein das Stammverzeichnis:

import amap from 'uni-app-amap';
Vue.use(amap);

Das ist es. Das Amap-Plugin wurde erfolgreich eingeführt.

2. Standortpositionierung und Kartenanzeige realisieren
Unter der Voraussetzung, dass das Karten-Plug-in eingeführt wurde, können wir die Karte anzeigen und die Positionspositionierung über die von uniapp bereitgestellte Kartenkomponente erreichen.

2.1 Einführung der Kartenkomponente auf der Seite
Führen Sie in der .vue-Datei der Seite die Kartenkomponente ein und legen Sie die zugehörigen Eigenschaften fest:

<template>
  <view class="map">
    <map :longitude="longitude" :latitude="latitude" :scale="scale" style="width: 100%; height: 100%"></map>
  </view>
</template>

Unter diesen stellen Längengrad und Breitengrad jeweils den Längengrad und Breitengrad der Karte dar Der Maßstab stellt die Zoomstufe der Karte dar.

2.2 Rufen Sie den aktuellen Standort ab und rendern Sie die Karte. Rufen Sie im