Shulou(Shulou.com)05/31 Report--

This article mainly introduces the relevant knowledge of "how to obtain the city positioning of WeChat Mini Programs". The editor shows you the operation process through an actual case, and the operation method is simple, fast and practical. I hope this article "how to obtain City orientation by WeChat Mini Programs" can help you solve the problem.

Realization method

WeChat Mini Programs does not provide such API, but it doesn't matter. It is enough to have the latitude and longitude obtained by wx.getLocation (). For others, we can use other third-party mapping services, such as Tencent Map or Baidu Map API.

Take Tencent Map as an example, we can go to Tencent Map open platform to register an account, and then create a key (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 getting longitude and latitude by address and finding address according to longitude and latitude. What we will use is to find address according to longitude and latitude, also known as "inverse address resolution":

Inverse address resolution

Inverse address resolution provides the conversion of the text description from the coordinates to the location where the coordinates are located. The calling form is an API in the form of 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 latitude and longitude coordinate address. You can replace the key in this URL with your own key, view it directly in the browser, and you can see results like this. You can also get more information based on different parameter options:

{"status": 0, "message": "query ok", "request_id": "6225548022856589453", "result": {"location": {"lat": 39.984154, "lng": 116.30749}, "address": "Caihefang Road, 66 Beishihuan West Road, Haidian District, Beijing", "formatted_addresses": {"recommend": "China Technology Trading Building, Zhongguancun Caihefang Road, Haidian District" "rough": "China Technology Exchange Building, Caihefang Road, Zhongguancun, Haidian District", "address_component": {"nation": "China", "province": "Beijing", "city": "Beijing", "district": "Haidian District", "street": "Caihefang Road", "street_number": "66 Beishihuan West Road"} "ad_info": {"adcode": "110108", "name": "China, Beijing, Beijing, Haidian District", "location": {"lat": 39.984154, "lng": 116.307487}, "nation": "China", "province": "Beijing", "city": "Beijing", "district": "Haidian District"} "address_reference": {"business_area": {"title": "Zhongguancun", "location": {"lat": 39.984058, "lng": 116.307518}, "_ distance": 0, "_ dir_desc": "inside"}, "famous_area": {"title": "Zhongguancun", "location": {"lat": 39.984058, "lng": 116.307518} "_ distance": 0, "_ dir_desc": "Nei"}, "crossroad": {"title": "Caihe Fang Road / North fourth Ring Road West Road (intersection)", "location": {"lat": 39.985001, "lng": 116.308113}, "_ distance": 104.2, "_ dir_desc": "Southwest"}, "village": {"title": "Daoxiang Garden North Community" "location": {"lat": 39.983269, "lng": 116.301979}, "_ distance": 480.1, "_ dir_desc": "East"}, "town": {"title": "Haidian Street", "location": {"lat": 39.984154, "lng": 116.307487}, "_ distance": 0, "_ dir_desc": "inside"} "street_number": {"title": "66 North fourth Ring Road West Road", "location": {"lat": 39.984119, "lng": 116.307503}, "_ distance": 6.9, "_ dir_desc": ""}, "street": {"title": "Caihe Square Road", "location": {"lat": 39.984154, "lng": 116.308098} "_ distance": 49.1, "_ dir_desc": "West"}, "landmark_l1": {"title": "Zhongguancun Venture Street, Beijing", "location": {"lat": 39.984055, "lng": 116.306992}, "_ distance": 43.9, "_ dir_desc": "East"}, "landmark_l2": {"title": "China Technology Trading Building" "location": {"lat": 39.984154, "lng": 116.307487}, "_ distance": 0, "_ dir_desc": "inside"}}

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 will call this API in our code. The API can be called through JSONP, or it can be invoked on the server side. I called it in my own server, and here is my code, implemented in Node.js Express, for reference only:

/ / Service call address: http://localhost:3000/lbs/locationrouter.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:' your Tencent Map key key'}}, (err, response) Data) = > {if (response.statusCode = 200) {responseUtil.jsonSuccess (res, data)} else {responseUtil.jsonError (res, 10001,')})})

Then, take a look at the Page code on the Mini Program side:

Page ({data: {address: {}}, onLoad: function () {/ / get the current latitude and longitude information wx.getLocation ({success: ({latitude, longitude})) = > {/ / call the background API Get address information 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 Mini Program interface to display these address information:

{{address.nation}} {{address.city}} {{address.district}}

The running result is as follows:

This is the end of the introduction to "how WeChat Mini Programs gets the city's position". Thank you for your reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.