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

Most people do not understand the knowledge points of this article "how to achieve map Map in WeChat Mini Programs", so the editor summarizes the following contents, detailed contents, clear steps, and has a certain reference value. I hope you can get something after reading this article. Let's take a look at this "how to achieve map Map in WeChat Mini Programs" article.

Preface

WeChat Mini Programs map operation is relatively simple, api is also very few, using map components to show. When it comes to maps, let's first look at basic positioning:

The wx.getLocation (OBJECT) function is used for positioning. The code is as follows:

Wx.getLocation ({type: 'wgs84', success: function (res) {var latitude = res.latitude var longitude = res.longitude var speed = res.speed var accuracy = res.accuracy}})

If the location is successful, four parameter values will be returned, as follows:

There are too many map attributes. Take a look at this first:

If you use a map, basically all the attributes will be used.

Let's take a look at the following one by one. Let's first look at the effect diagram and the truth first.

Here I only use one markers, which is the red markers that locates the current location. The usage is as follows:

Wx.getLocation ({type: 'wgs84', / / defaults to wgs84 returns gps coordinates Gcj02 returns the coordinates available for wx.openLocation success: function (res) {_ this.setData ({latitude: res.latitude, longitude: res.longitude, markers: [{id: "1", latitude: res.latitude, longitude: res.longitude, width: 50, height: 50, iconPath: "/ assests/imgs/my.png", title: "where"}], circles: [{latitude: res.latitude, longitude: res.longitude Color:'# FF0000DD', fillColor:'# 7cb5ec88percent, radius: 3000, strokeWidth: 1}]})})

Here added circles, the radius is 3000 meters, the specific api can see the official website.

Next, take a look at controls, the control layer, display controls on the map, controls do not move with the map, look at API:

Notice that in the upper-right corner of the example diagram, there are two buttons, the plus and minus sign, which control the numerical change of the map scale and dynamically zoom the map. The use of controls is also very simple:

Controls: [{id: 1, iconPath:'/ assests/imgs/jian.png', position: {left: 320, top: 100-50, width: 20, height: 20}, clickable: true}, {id: 2, iconPath:'/ assests/imgs/jia.png', position: {left: 340, top: 100-50, width: 20, height: 20}, clickable: true}]

Finally, let's take a look at a gif picture:

Finally, the following specific code:

Wxml:

Js:

Page ({data: {Height: 0, scale: 13, latitude: ", longitude:", markers: [], controls: [{id: 1, iconPath:'/ assests/imgs/jian.png', position: {left: 320, top: 100-50, width: 20, height: 20}, clickable: true}, {id: 2, iconPath:'/ assests/imgs/jia.png', position: {left: 340, top: 100-50 Width: 20, height: 20}, clickable: true}], circles: []}, onLoad: function () {var _ this = this Wx.getSystemInfo ({success: function (res) {/ / sets the map height, and displays _ this.setData ({view: {Height: res.windowHeight})}} on the full screen according to the width and height of the current device) wx.getLocation ({type: 'wgs84', / / defaults to wgs84 returns gps coordinates Gcj02 returns the coordinates available for wx.openLocation success: function (res) {_ this.setData ({latitude: res.latitude, longitude: res.longitude, markers: [{id: "1", latitude: res.latitude, longitude: res.longitude, width: 50, height: 50, iconPath: "/ assests/imgs/my.png", title: "where"}], circles: [{latitude: res.latitude, longitude: res.longitude Color:'# FF0000DD', fillColor:'# 7cb5ec88, radius: 3000, strokeWidth: 1}})})}, regionchange (e) {console.log ("regionchange===" + e.type)}, / / Click merkers markertap (e) {console.log (e.markerId) wx.showActionSheet ({itemList: ["A"], success: function (res) {console.log (res.tapIndex)} Fail: function (res) {console.log (res.errMsg)})}, / / Click the zoom button to dynamically request data controltap (e) {var that = this Console.log ("scale===" + this.data.scale) if (e.controlId = 1) {/ / if (this.data.scale = 13) {that.setData ({scale:-- this.data.scale}) / /}} else {/ / if (this.data.scale! = 13) {that.setData ({scale: + + this.data.scale}) / /} }) the above is the content of this article on "how to realize map Map in WeChat Mini Programs" I believe we all have a certain understanding. I hope the content shared by the editor will be helpful to you. If you want to know more about the relevant 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.