So implementieren Sie die Kartenpositionierung und die Umgebungsabfrage in Uniapp

So implementieren Sie Kartenpositionierung und Umgebungsabfragen in uniapp

Mit der Entwicklung des mobilen Internets sind Kartenpositionierung und Umgebungsabfragen zu einem der allgemeinen Anforderungen vieler Anwendungen geworden. In uniapp ist es relativ einfach, die Kartenpositionierung und Umgebungsabfragen zu implementieren. In diesem Artikel wird erläutert, wie Sie native Kartenkomponenten und zugehörige APIs verwenden, um die Kartenpositionierung und die umgebenden Abfragefunktionen in Uniapp zu implementieren.

1. Kartenpositionierung

Kartenpositionierung bezieht sich auf die Ermittlung der Breiten- und Längenkoordinaten des aktuellen Gerätestandorts. In uniapp können wir die Funktion uni.getLocation verwenden, um die Kartenpositionierung zu implementieren. Führen Sie zunächst die Funktion uni.getLocation auf der Seite ein, die die Kartenpositionierung verwenden muss:

import uni from 'uni-location'

Rufen Sie dann zum richtigen Zeitpunkt die Funktion uni.getLocation auf, um die Längen- und Breitengradkoordinaten des aktuellen Geräts zu erhalten:

// 获取当前设备的经纬度坐标
uni.getLocation({
  success: function(res) {
    var latitude = res.latitude
    var longitude = res.longitude
    console.log('纬度：' + latitude + '，经度：' + longitude)
  }
})

Oben Code, die Funktion uni.getLocation gibt ein Objekt zurück, das die aktuellen Gerätestandortinformationen enthält. Die Breiten- und Längenkoordinaten des aktuellen Gerätestandorts können über res.latitude und res.longitude abgerufen werden.

2. Kartenanzeige

Nachdem wir die Breiten- und Längenkoordinaten haben, können wir die von uniapp bereitgestellte native Kartenkomponente verwenden, um die Karte anzuzeigen. Führen Sie zunächst die Kartenkomponente in die Seite ein, die die Karte verwenden muss:

<uni-map id="map" :latitude="latitude" :longitude="longitude" :scale="14" :show-location="true" style="width: 100%; height: 400rpx;"></uni-map>

Im obigen Code verwenden wir die Uni-Map-Komponente und legen die relevanten Eigenschaften fest. Das ID-Attribut ist „Karte“, und Breitengrad und Längengrad sind die erhaltenen Längengrad- bzw. Breitengradkoordinaten. Mit dem Scale-Attribut wird die Zoomstufe der Karte festgelegt. Der Standardwert ist 14. Mit dem Show-Location-Attribut wird festgelegt, ob die aktuelle Standortmarkierung angezeigt werden soll. Der Standardwert ist true. Mit dem style-Attribut wird die Anzeigegröße der Karte festgelegt.

3. Umgebungsabfrage

Die Umgebungsabfrage der Karte in uniapp kann durch Aufruf der entsprechenden API realisiert werden. Als Beispiel nehmen wir hier die Abfrage umliegender POIs (Points of Interest). Zunächst müssen Sie den APIKey des Kartendienstes in der Datei manifest.json von uniapp konfigurieren. Dieser APIKey kann auf der Entwicklerplattform beantragt und bezogen werden.

Suchen Sie den entsprechenden öffentlichen Teil in der Datei manifest.json und fügen Sie den folgenden Code hinzu:

"mp": {
  "config": {
    "permission": {
      "scope.userLocation": {
        "desc": "您的位置信息将用于地图定位"
      }
    }
  },
  "requireCustomRoutes": true,
  "usingComponents": {
    "uni-map": "@dcloudio/uni-ui/lib/uni-map/uni-map"
  }
},
"h5": {
  "publicPath": "/",
  "staticDirectory": "static",
  "webpackChain": {},
  "webpackDevServer": {},
  "enableLinter": false
},
"qrcode": {
  "title": "uni-demo",
  "path": "pages/index/index",
  "width": 430,
  "autoColor": true
},
"appid": "tourist"

Dann führen Sie die Funktionen uni.getLocation und uni.request auf der Seite ein, auf der umgebende Abfragen erforderlich sind:

import uni from 'uni-location'
import uniRequest from 'uni-request'

Als nächstes können wir übergeben Die Funktion uni.getLocation ruft die Breiten- und Längenkoordinaten des aktuellen Gerätestandorts ab und verwendet dann die Funktion uni.request, um eine Anfrage an die kartenbezogene API zu senden, um die umliegenden POIs abzufragen. Das Folgende ist ein Beispielcode:

uni.getLocation({
  success: function (res) {
    var latitude = res.latitude
    var longitude = res.longitude
    uni.request({
      url: 'https://apis.map.qq.com/ws/place/v1/search',
      data: {
        keyword: '美食',
        location: latitude + ',' + longitude,
        radius: 1000,
        key: '地图服务的apiKey'
      },
      success: function (res) {
        console.log(res.data)
        // 在这里处理查询结果
      }
    })
  }
})

Im obigen Beispielcode senden wir eine Anfrage an die Kartendienst-API, indem wir Parameter wie URL, Daten und Schlüssel festlegen, um Points of Interest mit dem Schlüsselwort „Essen“ und einem Radius abzufragen von 1000 Metern. Nach Erfolg werden die Abfrageergebnisse zurückgegeben und wir können diese Ergebnisse in der Erfolgsrückruffunktion verarbeiten.

Durch die oben genannten Schritte ist es relativ einfach, die Kartenpositionierung und Umgebungsabfragen in Uniapp zu implementieren. Durch den Erhalt der Breiten- und Längenkoordinaten können wir den aktuellen Gerätestandort auf der Karte anzeigen und umliegende POIs über die API abfragen. Sie können den Code auch frei verwenden und entsprechend den tatsächlichen Anforderungen ändern, um weitere Kartenfunktionen zu implementieren.

Das obige ist der detaillierte Inhalt vonSo implementieren Sie die Kartenpositionierung und die Umgebungsabfrage in Uniapp. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!