Implementation of WeChat Mini Program City Positioning

This article carefully introduces to you the implementation example of city positioning in the WeChat mini program. It mainly realizes the acquisition of relevant information about the city information of the current country. The introduction in the article is very detailed. I believe it has certain reference and learning value for everyone. It is necessary Friends, let’s take a look below.

Preface

In the WeChat applet, we can get the current location of the device by calling wx.getLocation() The geographical location information, this information is the longitude and latitude of the current location. If we want to get information such as which country and city our current location is in, how can we achieve this?

Implementation method

The WeChat applet does not provide such an API, but it doesn’t matter, there is wx.getLocation()The obtained longitude and latitude are enough as the basis. For others, we can use other third-party map services to implement, such as Tencent Map or Baidu Map API.

Taking Tencent Map as an example, we can register an account on the Tencent Map Open Platform and then create a key in its management background.

Then in the top menu, you can find the WebServiceAPI menu:

Tencent Map WebServiceAPI

Tencent Map provides a lot of WebServiceAPI, such as according to The address obtains the longitude and latitude, and finds the address based on the longitude and latitude. What we are going to use is to find the address based on the longitude and latitude, which is also called "reverse address resolution":

Reverse address resolution

Reverse geocoding provides conversion from coordinates to text descriptions of coordinate locations. The calling form is an API in the form of an HTTP URL. The basic usage is as follows:

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

The basic parameter of this URL is a longitude and latitude coordinate address. . You can replace the key in this URL with your own key and view it directly in the browser to see results similar to this. You can also get richer information by passing in different parameter options:

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

From the return result of this API, we can see that it contains the address information we want, such as country, city, district, etc.

Next, we need to call this API in our code. The API can be called through JSONP, or it can be called on the server side. I called it in my own server. The following is my code, implemented using Node.js Express, for reference only:

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

Then, you can take a look at the Page code on the mini program:

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

})

And a simple small program interface for displaying these address information:

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

The running results are as follows:

Run Result

The above is the entire content of this article. I hope it will be helpful to everyone's study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

How to obtain the latitude and longitude coordinates of your location through the WeChat applet

##WeChat How to use the three-level linkage selector of the mini program

The above is the detailed content of Implementation of WeChat Mini Program City Positioning. For more information, please follow other related articles on the PHP Chinese website!