Shulou(Shulou.com)06/01 Report--

Today, the editor will share with you the relevant knowledge about how WeChat Mini Programs displays the information of his location. The content is detailed and the logic is clear. I believe most people still know too much about this, so share this article for your reference. I hope you can get something after reading this article. Let's take a look at it.

Suppose we specify multiple monitoring points, and the next requirement is to give each monitoring point a name. If you enter it manually, it will be troublesome. So the location alarm takes a step forward and gets the information about the location of the monitoring point from the map as the name of the monitoring point.

Picture description

When we select the monitoring point, the information there will be shown in the list below. By scrolling up and down the contents of the list, the user can select the appropriate information as the name of the monitoring point.

Setpoint.wxml

To look convenient, only the newly added parts are selected here.

{{pois.title}}

Piker-view displays the data in pois.pois, and when the user scrolls it, the pikerChange method in setpoint.js is called, and the index of the current project is the parameter.

Util.js

A function has been added to util.js to get the information about the specified location. The code is as follows:

Function getPoisByLocation (latitude, longitude, callback) {

/ / for the specific json return format, please refer to Tencent Map API API documentation.

Var key = "M6VBZ-BPRHX-YPK45-7Q4GC-Z3F7T-7YFO7"; / / you need to apply to http://lbs.qq.com/

Var url = "https://apis.map.qq.com/ws/geocoder/v1/?location=" + latitude +", "+ longitude +" & key= "+ key+" & get_poi=1 "

Var defaultUrl = "http://www.apayado.com/pois.json?" + new Date () .getTime ()

Wx.request ({

Url: url

Success: function (res) {

Callback (res.data.result)

}

Fail: function (res) {

GetDefaultPoiData (defaultUrl, function (res) {

Callback (res)

});

}

});

}

This code comes from [Mini Program, skillful Application: WeChat Mini Programs Development practice (2nd Edition)], with a little modification here.

This function accesses Tencent's location service through wx.request. When the service is successfully called, the callback function is called with the return value of the location service as a parameter. And this callback function is passed in by the user when calling the getPoisByLocation function.

In addition, you need to do two other things when accessing Tencent location service from WeChat Mini Programs: one is to use the key (KEY) when applying for access to http://lbs.qq.com; the other is to specify the domain name that Mini Program is allowed to access in the Mini Program configuration screen. The setting screen is as follows, depending on the server domain name setting.

Setpoint.js

Obtain and represent geographic information

When the view of the map changes, the following function is called by the architecture.

RegionChanged: function (e) {

Console.log ("setpoints.js regionChanged")

Var that = this

This.mapCtx.getCenterLocation ({

Success: function (res) {

Type: 'gcj02', / / return can be used for wx. Latitude and longitude of openLocation

Util.getPoisByLocation (res.latitude, res.longitude, function (data) {

Console.log (data)

That.setData ({

Pois:data

});

})

App.globalData.currentAlarm = {

Longitude: res.longitude

Latitude: res.latitude

}

}

})

}

Pay attention to the yellow background. After the getPoisByLocation succeeds, the data is passed to the pois member through the setData function. The work from pois to screen is done by architecture, and programmers don't need to worry about it.

Handle user selection actions

PikerChange: function (e) {

Const val = e.detail.value

App.globalData.currentAlarm.title = this.data.pois.pois [val]

}

The parameter to this function is the index of the item selected by the user, through which the appropriate information is selected and passed to the monitoring point.

These are all the contents of the article "how to display the location of WeChat Mini Programs". Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.

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.