Implementierung des WeChat Mini-Programms zur Stadtpositionierung

Dieser Artikel stellt Ihnen ein Beispiel für die Implementierung der Stadtpositionierung im WeChat-Miniprogramm vor. Es realisiert hauptsächlich die Erfassung relevanter Informationen über die Stadtinformationen des aktuellen Landes Ich glaube, es hat einen gewissen Referenz- und Lernwert für alle. Es ist notwendig, Freunde, schauen wir uns das unten an.

Vorwort

Im WeChat-Applet können wir die aktuellen geografischen Standortinformationen des Geräts abrufen, indem wir wx.getLocation() aufrufen Der Breiten- und Längengrad des aktuellen Standorts. Wie können wir das erreichen, wenn wir beispielsweise Informationen darüber erhalten möchten, in welchem ​​Land und in welcher Stadt sich unser aktueller Standort befindet?

Implementierungsmethode

Das WeChat-Applet bietet keine solche API, aber das spielt keine Rolle, da die Breiten- und Längengrade von erhalten werden wx.getLocation() Als Grundlage können wir andere Kartendienste von Drittanbietern verwenden, um dies zu erreichen, beispielsweise Tencent Maps oder Baidu Maps API.

Am Beispiel von Tencent Map können wir ein Konto auf der Tencent Map Open Platform registrieren und dann einen Schlüssel in dessen Verwaltungshintergrund erstellen.

Dann finden Sie im oberen Menü das WebServiceAPI-Menü:

Tencent Map WebServiceAPI

Tencent Map bietet viele WebServiceAPIs , wie zum Beispiel nach Die Adresse erhält den Längen- und Breitengrad und findet die Adresse basierend auf dem Längen- und Breitengrad. Wir werden die Adresse basierend auf dem Längen- und Breitengrad finden, was auch als „umgekehrte Adressauflösung“ bezeichnet wird. :

Umgekehrte Adressauflösung

Umgekehrte Geokodierung ermöglicht die Konvertierung von Koordinaten in eine Textbeschreibung des Standorts der Koordinaten. Das aufrufende Formular ist eine API im Formular Die grundlegende Verwendung ist wie folgt:

http://apis.map.qq.com/ws/geocoder/v1/?location=39.984154,116.307490&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77

Der grundlegende Parameter dieser URL ist eine Längen- und Breitenkoordinatenadresse. Sie können den Schlüssel in dieser URL durch Ihren eigenen Schlüssel ersetzen und ihn direkt im Browser anzeigen, um ähnliche Ergebnisse zu erhalten. Sie können auch umfassendere Informationen erhalten, indem Sie verschiedene Parameteroptionen übergeben:

{
 "status": 0,
 "message": "query ok",
 "request_id": "6225548022856589453",
 "result": {
 "location": {
  "lat": 39.984154,
  "lng": 116.30749
 },
 "address": "北京市海淀区北四环西路66号彩和坊路",
 "formatted_addresses": {
  "recommend": "海淀区中关村彩和坊路中国技术交易大厦",
  "rough": "海淀区中关村彩和坊路中国技术交易大厦"
 },
 "address_component": {
  "nation": "中国",
  "province": "北京市",
  "city": "北京市",
  "district": "海淀区",
  "street": "彩和坊路",
  "street_number": "北四环西路66号"
 },
 "ad_info": {
  "adcode": "110108",
  "name": "中国,北京市,北京市,海淀区",
  "location": {
  "lat": 39.984154,
  "lng": 116.307487
  },
  "nation": "中国",
  "province": "北京市",
  "city": "北京市",
  "district": "海淀区"
 },
 "address_reference": {
  "business_area": {
  "title": "中关村",
  "location": {
   "lat": 39.984058,
   "lng": 116.307518
  },
  "_distance": 0,
  "_dir_desc": "内"
  },
  "famous_area": {
  "title": "中关村",
  "location": {
   "lat": 39.984058,
   "lng": 116.307518
  },
  "_distance": 0,
  "_dir_desc": "内"
  },
  "crossroad": {
  "title": "彩和坊路/北四环西路辅路(路口)",
  "location": {
   "lat": 39.985001,
   "lng": 116.308113
  },
  "_distance": 104.2,
  "_dir_desc": "西南"
  },
  "village": {
  "title": "稻香园北社区",
  "location": {
   "lat": 39.983269,
   "lng": 116.301979
  },
  "_distance": 480.1,
  "_dir_desc": "东"
  },
  "town": {
  "title": "海淀街道",
  "location": {
   "lat": 39.984154,
   "lng": 116.307487
  },
  "_distance": 0,
  "_dir_desc": "内"
  },
  "street_number": {
  "title": "北四环西路66号",
  "location": {
   "lat": 39.984119,
   "lng": 116.307503
  },
  "_distance": 6.9,
  "_dir_desc": ""
  },
  "street": {
  "title": "彩和坊路",
  "location": {
   "lat": 39.984154,
   "lng": 116.308098
  },
  "_distance": 49.1,
  "_dir_desc": "西"
  },
  "landmark_l1": {
  "title": "北京中关村创业大街",
  "location": {
   "lat": 39.984055,
   "lng": 116.306992
  },
  "_distance": 43.9,
  "_dir_desc": "东"
  },
  "landmark_l2": {
  "title": "中国技术交易大厦",
  "location": {
   "lat": 39.984154,
   "lng": 116.307487
  },
  "_distance": 0,
  "_dir_desc": "内"
  }
 }
 }
}

Aus dem Rückgabeergebnis Anhand dieser API können wir sehen, dass sie die gewünschten Adressinformationen enthält, z. B. Land, Stadt, Bezirk usw.

Als nächstes müssen wir diese API in unserem Code aufrufen. Die API kann über JSONP oder serverseitig aufgerufen werden. Ich habe es auf meinem eigenen Server aufgerufen. Das Folgende ist mein Code, der nur als Referenz mit Node.js Express implementiert wurde:

// 服务调用地址：http://localhost:3000/lbs/location

router.get('/lbs/location', function (req, res, next) {
 let lat = req.query.latitude
 let lng = req.query.longitude

 request.get({
 uri: 'https://apis.map.qq.com/ws/geocoder/v1/',
 json: true,
 qs: {
 location: `${lat},${lng}`,
 key: '你的腾讯地图密钥key'
 }
 }, (err, response, data) => {
 if (response.statusCode === 200) {
 responseUtil.jsonSuccess(res, data)
 } else {
 responseUtil.jsonError(res, 10001, '')
 }
 })
})

Dann können Sie sich den Seitencode im Miniprogramm ansehen:

Page({

 data: {
 address: {}
 },

 onLoad: function () {
 //获取当前经纬度信息
 wx.getLocation({
 success: ({latitude, longitude}) => {

 //调用后台API，获取地址信息
 wx.request({
  url: 'http://localhost:3000/lbs/location',

  data: {
  latitude: latitude,
  longitude: longitude
  },

  success: (res) => {
  let info = res.data.data.result.ad_info
  this.setData({ address: info })
  },

  fail: () => {
  },

  complete: () => {
  }
 })
 }
 })
 }

})

und eine einfache Applet-Schnittstelle zum Anzeigen dieser Adressinformationen:

<view>
 <view>{{address.nation}}</view>
 <view>{{address.city}}</view>
 <view>{{address.district}}</view>
</view>

Das laufende Ergebnis lautet wie folgt:

Run Results

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website.

Verwandte Empfehlungen:

So erhalten Sie die Breiten- und Längenkoordinaten Ihres Standorts über das WeChat-Applet

WeChat How um den dreistufigen Verknüpfungswähler des Miniprogramms zu verwenden

Das obige ist der detaillierte Inhalt vonImplementierung des WeChat Mini-Programms zur Stadtpositionierung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!