So verwenden Sie AutoNavi in ​​uniApp

Mit der Entwicklung mobiler Anwendungen und Ortungstechnologien sind Karten zu einem unverzichtbaren Werkzeug in unserem täglichen Leben und Arbeiten geworden. Als einer der wichtigsten Kartendienstanbieter in China wird Amap von Entwicklern aufgrund seiner Funktionen und Datenressourcen bevorzugt. Wie sollten wir Amap in uniApp verwenden?

1. Beantragen Sie einen Amap-API-Schlüssel

Bevor Sie Amap verwenden, müssen wir einen API-Schlüssel auf der offenen Amap-Plattform beantragen. Die Schritte sind wie folgt:

1. Öffnen Sie die offizielle Website der AMAP Open Platform (https://lbs.amap.com/).

2. Registrieren Sie sich und melden Sie sich bei Ihrem Entwicklerkonto an.

3. Erstellen Sie eine Anwendung über die Verwaltungskonsole.

4. Suchen Sie die Seite „Grundkonfiguration“ auf der Anwendungsverwaltungsseite und beantragen Sie einen API-Schlüssel.

5. Nachdem die Anwendung erfolgreich war, können Sie den generierten Schlüsselwert auf der Seite „Anwendungsverwaltung“ für die spätere Entwicklung sehen.

2. Verwenden Sie Amap SDK

Um Amap in uniApp verwenden zu können, müssen wir Amap SDK verwenden. Die Uni-App-Plattform stellt ein Plug-In namens uni-amap bereit, mit dem das AMAP SDK problemlos in Uni-App verwendet werden kann.

1. Installieren Sie das Uni-Amap-Plugin.

Öffnen Sie das Uni-App-Projekt in HBuilderX, wählen Sie „Plug-in Market“ in der Menüleiste, geben Sie „uni-amap“ in das Suchfeld ein, um zu suchen, wählen Sie das Plug-in aus und installieren Sie es.

2. Stellen Sie das Amap SDK vor.

Fügen Sie das Amap SDK in die App.vue-Datei ein, wie unten gezeigt:

<template>
  <uni-amap id="myMap" :longitude="longitude" :latitude="latitude" :markers="markers"></uni-amap>
</template>

<script>
import '@dcloudio/uni-amap'
export default {
  data() {
    return {
      longitude: 116.397390,
      latitude: 39.908860,
      markers: [{
        id: 0,
        longitude: 116.397390,
        latitude: 39.908860,
        title: '东方明珠',
        iconPath: '../../static/marker.png',
        width: 32,
        height: 32,
        zIndex: 999
      }]
    }
  }
}
</script>

In diesem Code definieren wir ein Uni-Amap-Label, das anhand der angegebenen Parameter für Längengrad, Breitengrad und Markierungen auf der Karte anzeigen kann, was wir benötigen . Karteninformationen.

3. Amap-Anwendungsszenarien

1. Über das Amap SDK können wir die Standortinformationen des Benutzers abrufen und für verschiedene Anwendungsszenarien navigieren. In der Uni-App können wir die Standortinformationen des Benutzers über die Methode uni.getLocation() abrufen. Der Code lautet wie folgt:

uni.getLocation({
  type: 'gcj02',
  success: function (res) {
    console.log('location', res)
  }
})

2. Karten-POI-Suche

Mit dem Amap SDK können wir eine Stichwortsuche für umliegende POIs (Points of Interest) realisieren. In der Uni-App können wir umliegende POI-Informationen über die Methode uni.amap.getPoiAround() abrufen. Der Code lautet wie folgt:

uni.amap.getPoiAround({
  iconPath: '../../static/marker.png',
  longitude: 116.397390,
  latitude: 39.908860,
  success: function (res) {
    console.log('search result:', res)
  }
})

4. Mit dem Amap SDK können wir die positionierte Flugbahn visualisieren. In uni-app können wir die Methode uni.amap.showPolyline() verwenden, um die Flugbahn auf der Karte anzuzeigen. Der Code lautet wie folgt:

var points = [
  {'longitude': 116.397390, 'latitude': 39.908860},
  {'longitude': 116.407390, 'latitude': 39.918860},
  {'longitude': 116.417390, 'latitude': 39.928860},
  {'longitude': 116.427390, 'latitude': 39.938860}
]
uni.amap.showPolyline({
  arrowLine: true,
  points: points,
  color: '#FF00FF',
  width: 10,
  zIndex: 99
})

Das Obige ist die grundlegende Methode zur Verwendung von Amap in der Uni-App. Natürlich verfügt das Amap SDK über weitere Funktionen und APIs, die wir entsprechend unseren eigenen Anforderungen aufrufen können.

Das obige ist der detaillierte Inhalt vonSo verwenden Sie AutoNavi in ​​uniApp. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!