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

This article mainly introduces WeChat Mini Programs how to obtain geographical location and map navigation related knowledge, the content is detailed and easy to understand, the operation is simple and fast, and has a certain reference value. I believe you will gain something after reading this WeChat Mini Programs article on how to obtain geographical location and map navigation. Let's take a look.

one。 To obtain the geographical location because Mini Program only provides us with an api to obtain the geographical location and speed, and does not obtain the relevant status location information, we use the api of Baidu Map to obtain the status location.

Document

1. Apply for ak

Http://lbsyun.baidu.com/index.php?title=wxjsapi/guide/key

two。 Download the api of Baidu Maps, link: http://download.csdn.net/detail/michael_ouyang/9754015

After decompression, there are two js files in it, one is not compressed normally, the other is compressed

PS: as the Mini Program project file size limit is 1m, it is recommended to use a compressed version of the js file!

Use 5kb, that js.

3. Introduction of JS module

Put it under utils

4. Import js in the required js file

/ / reference Baidu map. Note: a relative path is passed in require.

Var bmap = require ('.. /.. / utils/bmap-wx/bmap-wx.js')

5. Edit code

The .wxss code is

Longitude: {{longitude}} Latitude: {{latitude}} address: {{address}} City: {{cityInfo.city}} .js code is:

Var bmap = requir ('.. /.. / utils/bmap-wx/bmap-wx.min.js'); var wxMarkerData = [] / / successfully locate the callback object Page ({data: {ak: "FHG7utZtdyXN2", / / fill in the applied akmarkers: [], longitude:'', / / longitude latitude:'', / / latitude address:'', / / address cityInfo: {} / / city information}, onLoad: function (options) {var that = this) / * obtain the location geographic location * / / create a new bmap object var BMap = new bmap.BMapWX ({ak: that.data.ak}); var fail = function (data) {console.log (data);}; var success = function (data) {/ / the returned data already contains latitude and longitude console.log (data); / / use wxMarkerData to obtain data wxMarkerData = data.wxMarkerData / / put all the data in the initialization data that.setData ({markers: wxMarkerData,latitude: wxMarkerData [0] .latitude, longitude: wxMarkerData [0] .longitude, address: wxMarkerData [0] .address, cityInfo: data.originalData.result.addressComponent});} / initiate regeocoding search request BMap.regeocoding ({fail: fail,success: success});}}) 6. Operation note: the running environment of the building master is on the simulator, and there are some errors in the positioning obtained by the simulator. If you want to test the real geographical location information, you also need to use the real machine test!

two。 For map navigation, WeChat Mini Programs cannot navigate inside, because the code of Mini Program can only have 1m at most, his running memory can only have 10m, and more than 1m can be downloaded from an area map, so we can't navigate inside the app. But outside the app!

With regard to APP development, generally, if the navigation function is not very important, it will be put outside the application to do this function, but Amap and Tencent Map will have a responsive SDK, but Mini Program is different, how can we call the navigation function outside Mini Program?

Open the API about the location in Mini Program, and 1.wx.getLocation (OBJECT) to get the current geographical location and speed. 2.wx.chooseLocation (OBJECT) opens the map to select the location. 3.wx.openLocation (OBJECT) uses Wechat's built-in map to view locations.

The specific implementation code is as follows:

Wx.getLocation ({type: 'gcj02', / / returns the latitude and longitude success: function (res) {var latitude = res.latitudevar longitude = res.longitudewx.openLocation ({latitude: latitude,longitude: longitude,name: "Changsha University of Science and Technology", scale: 28})}}) selects the map on the phone, and then jumps to the corresponding map APP, realizing the navigation function of calling outside the application.

This is the end of the article on "how to get WeChat Mini Programs's geographical location and map navigation". Thank you for reading! I believe you all have a certain understanding of "how to obtain the geographical location and map navigation of WeChat Mini Programs". If you want to learn more, you are welcome to follow 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.