Mise en œuvre du positionnement de la ville du mini programme WeChat

Cet article vous présente soigneusement un exemple de mise en œuvre du positionnement de la ville dans le mini programme WeChat. Il réalise principalement l'acquisition d'informations pertinentes sur les informations sur la ville du pays actuel. Je crois qu'il a une certaine valeur de référence et d'apprentissage pour tout le monde. C'est nécessaire Mes amis, jetons un coup d'œil ci-dessous.

Avant-propos

Dans l'applet WeChat, nous pouvons obtenir les informations de localisation géographique actuelle de l'appareil en appelant wx.getLocation(). La latitude et la longitude de l'emplacement actuel. Si nous souhaitons obtenir des informations telles que le pays et la ville dans lesquels nous nous trouvons actuellement, comment pouvons-nous y parvenir ?

Méthode de mise en œuvre

L'applet WeChat ne fournit pas une telle API, mais ce n'est pas grave, avec la latitude et la longitude obtenues par wx.getLocation() comme base. Assez, pour d'autres choses, nous pouvons utiliser d'autres services de cartographie tiers pour y parvenir, comme Tencent Maps ou l'API Baidu Maps.

En prenant Tencent Map comme exemple, nous pouvons enregistrer un compte sur la plateforme ouverte Tencent Map puis créer une clé dans son arrière-plan de gestion.

Ensuite, dans le menu du haut, vous pouvez trouver le menu WebServiceAPI :

Tencent Map WebServiceAPI

Tencent Map fournit de nombreuses WebServiceAPI , comme selon L'adresse obtient la longitude et la latitude, et trouve l'adresse en fonction de la longitude et de la latitude. Ce que nous allons utiliser est de trouver l'adresse en fonction de la longitude et de la latitude, également connue sous le nom de « résolution d'adresse inversée ». :

Résolution d'adresse inversée

Le géocodage inversé permet la conversion des coordonnées en description textuelle de l'emplacement des coordonnées. Le formulaire appelant est une API dans le formulaire. de l'URL HTTP. L'utilisation de base est la suivante :

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

Le paramètre de base de cette URL est une adresse de coordonnées de longitude et de latitude. Vous pouvez remplacer la clé dans cette URL par votre propre clé et l'afficher directement dans le navigateur pour voir des résultats similaires à celui-ci. Vous pouvez également obtenir des informations plus riches en transmettant différentes options de paramètres :

{
 "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": "内"
  }
 }
 }
}

Depuis le. résultat de retour de cette API, nous pouvons voir qu'elle contient les informations d'adresse que nous souhaitons, telles que le pays, la ville, le district, etc.

Ensuite, nous devons appeler cette API dans notre code. L'API peut être appelée via JSONP ou côté serveur. Je l'ai appelé sur mon propre serveur. Voici mon code, implémenté à l'aide de Node.js Express, pour référence uniquement :

// 服务调用地址：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, '')
 }
 })
})

Ensuite, vous pouvez jeter un œil au code de la page dans le mini programme :

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: () => {
  }
 })
 }
 })
 }

})

et une interface applet simple pour afficher ces informations d'adresse :

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

Les résultats en cours d'exécution sont les suivants :

Résultats de l'opération

Ce qui précède est l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

Comment obtenir les coordonnées de latitude et de longitude de votre emplacement via l'applet WeChat

WeChat Comment pour utiliser le sélecteur de liaison à trois niveaux du mini programme

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!