Map implementation tutorial for WeChat applet development and map for Program Development

Map implementation tutorial for applet development and map for Program Development

Preface

The map operation of a applet is relatively simple, and there are few APIs. The map component is used for display. Speaking of maps, Let's first look at the basic positioning:

Locate and usewx.getLocation(OBJECT)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 positioning succeeds, four parameter values are returned, as follows:

There are too many map attributes. Let's take a look at them first:

If map is used, basically all attributes will be used.

Let's take a look at it one by one. Let's take a look at the truth first:

Here I only use one markers, which is the red markers for locating the current position. The usage is as follows:

Wx. getLocation ({type: 'wgs84 ', // The default value is wgs84, which returns the gps coordinates. gcj02 returns the coordinates that can be used for wx. coordinates success: function (res) {_ this. setData ({latitude: res. latitude, longpolling: res. longpolling, markers: [{id: "1", latitude: res. latitude, longpolling: res. longpolling, width: 50, height: 50, iconPath: "/assests/imgs/my.png", title: "Where"}], circles: [{latitude: res. latitude, longpolling: res. longpolling, color: '# ff1_dd', fillColor: '#7cb5ec88', radius: 3000, strokeWidth: 1}]})}

Circles is added here, with a radius of 3000 meters. For specific APIs, visit the official website.

Next, let's take a look at controls, control layer, and display controls on the map. The controls do not move with the map. Check the API:

Note that there are two buttons in the upper-right corner of the example graph, plus or minus signs, to control the value change of the map scale and dynamically scale the map. The controls usage 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 look at a gif image:

The specific code is as follows:

Wxml:

 <map id="map" longitude="{{longitude}}" latitude="{{latitude}}" scale="{{scale}}" controls="{{controls}}" bindcontroltap="controltap" markers="{{markers}}" circles="{{circles}}" bindmarkertap="markertap" polyline="{{polyline}}" bindregionchange="regionchange" show-location style="width: 100%; height: {{view.Height}}px;"></map>

Js:

Page ({data: {Height: 0, scale: 13, latitude: "", longpolling: "", 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; w X. getSystemInfo ({success: function (res) {// sets the map height, which is displayed on the full screen based on the current device width and height. setData ({view: {Height: res. windowHeight }}}) wx. getLocation ({type: 'wgs84 ', // The default value is wgs84, which returns the gps coordinates. gcj02 returns the coordinates that can be used for wx. coordinates success: function (res) {_ this. setData ({latitude: res. latitude, longpolling: res. longpolling, markers: [{id: "1", latitude: res. latitude, longpolling: res. longpolling, width: 50, height: 50, I ConPath: "/assests/imgs/my.png", title: "Where"}], circles: [{latitude: res. latitude, longpolling: res. longpolling, color: '# ff1_dd', 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 })//}}},})

Summary

The above is all the content of this article. I hope the content of this article will help you in your study or work. If you have any questions, please leave a message, thank you for your support.