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

Most people do not understand the knowledge of this article "how to develop MAP by WeChat Mini Programs", so the editor summarizes the following content, detailed content, 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 "WeChat Mini Programs how to develop MAP" article.

Detailed explanation of an example of MAP (Map) developed by WeChat Mini Programs

Before creating MAP (map), please seriously understand the instructions developed by WeChat Mini Programs.

After learning about the properties in MAP, let's create a simple MAP control.

The first step: be sure to create the project, start the project name, and project address

PS: I'm here named after index's file.

Step 2: let's write the code for the index.wxml file

WXML file code:

Once the code for the WXML file is written, it's time to move on to the third step.

Step 3: write the code for the index.js file

Var app = getApp () Page ({data: {map_width: 380} / / show current position, onLoad: function (options) {console.log (options.schedule_id); var that = this / / get the location And mark the location that.setData ({longitude: 113.324520, latitude: 23.099994, markers: [{id: 0, iconPath: ".. / imgs/ic_position.png", longitude: 113.324520, latitude: 23.099994, width: 30, height: 30}]}) / / set the width and height / / dynamically set the width and height of map wx.getSystemInfo ({success: function (res) {console.log (res.windowWidth)) That.setData ({map_width: res.windowWidth, map_height: res.windowWidth, controls: [{id: 1, iconPath:'.. / imgs/ic_location.png', position: {left: res.windowWidth / 2-8, top: res.windowWidth / 2-16, width: 30, height: 30}, clickable: true}]})} / / obtain the latitude and longitude of the intermediate point And mark out, getLngLat: function () {var that = this This.mapCtx = wx.createMapContext ("map4select") This.mapCtx.getCenterLocation ({success: function (res) {that.setData ({longitude: 113.324520, latitude: 23.099994, markers: [{id: 0, iconPath: ".. / imgs/ic_position.png", longitude: 113.324520, latitude: 23.099994, width: 30, height: 30}})})}, regionchange (e) {/ when the map changes Get the midpoint, that is, the location selected by the user if (e.type = = 'end') {this.getLngLat ()}}, markertap (e) {console.log (e)}})

The code for the index.js and index.wxml files has been written, so let's take a look at the results on the page.

PS: ".. / imgs/ic_position.png" and ".. / imgs/ic_location.png" are two small icons in a folder called imgs that I created in the project. Friends can change the small icons according to their own needs. Just put the small icons into the imgs folder, and the path reference of the small icons can be displayed correctly.

The above is about the content of this article on "how to develop MAP by 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 related 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.