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

This article mainly introduces the relevant knowledge of WeChat Mini Programs how to achieve multi-location identification on the map, 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 achieve multi-location identification on the map. Let's take a look.

Here are the specific practices:

Wxml

1 js

1 let hospitalData = require ('hospitalData') 2 Page ({3 data: {4 centerX: 0 centerY 5 centerY: 0 centerX 6 / / maybe the location I marked is far from your area, and the zoom ratio is recommended 5 7 scale:15,8 markers: [], 9 controls: [{10 id: 1function 11 iconPath:'/ image/location-control.png',12 position: {13 left: 0function 14 top: 10 width 15 width: 40 onReady 16 height: 4017}, 18 clickable: true19}] 20}, 21 onReady: function (e) {22 / / use wx.createMapContext to get map context 23 this.mapCtx = wx.createMapContext ('myMap') 24}, 2526 onLoad: function () {27 console.log (' Map location!') 28 let that = this29 wx.getLocation ({30 type: 'gcj02', / / returns latitude and longitude 31 success: (res) = > {32 let latitude = res.latitude;33 let longitude = res.longitude;34 let marker = this.createMarker (res); 35 this.setData ({36 centerX: longitude,37 centerY: latitude,38 markers: this.getHospitalMarkers () 39}) 40} 41}) 42}, 4344 / * 45 * Mark point movement trigger 46 * / 47 regionchange (e) {48 console.log (e.type) 49}, 5051 / * * 52 * Click identification point trigger 53 * / 54 markertap (e) {55 console.log (e) 56}, 5758 / * 59 * control control click time 60 * / 61 controltap (e) {62 console.log (e.controlId) 63 this.moveToLocation () 64} 656667 / * 68 * obtain hospital ID 69 * / 70 getHospitalMarkers () {71 let markers = [] 72 for (let item of hospitalData) {73 let marker = this.createMarker (item); 74 markers.push (marker) 75} 76 return markers;77}, 7879 / * * 80 * move to its own location 81 * / 82 moveToLocation: function () {83 let mpCtx = wx.createMapContext ("map"); 84 mpCtx.moveToLocation (); 85}, 868788 / * 89 * there is also a map logo, you can use 90 * / 91 createMarker (point) {92 let latitude = point.latitude on name. 93 let longitude = point.longitude;94 let marker = {95 iconPath: "/ image/location.png", 96 id: point.id | | 0return marker;104 97 name: point.name | |', 98 latitude: latitude,99 longitude: longitude,100 width: 25101 height: 48102}; 103 return marker;104} 105}) hospitalData.js (simulation data)

1 module.exports = [{2 "id": 1 "name": "Yongzhou Central Hospital", 4 "longitude": "111.62852107566833", 5 "latitude": "26.42142999357519" 6}, 7 {8 "id": 2pc9 "name": "Yongzhou Hospital of traditional Chinese Medicine", 10 "longitude": "111.5972679762268", 11 "latitude": "26.44470581245983" 12} 13] when running the example, it is recommended to put it in the same directory.

This is the end of the article on "how WeChat Mini Programs can identify multiple locations on the map". Thank you for your reading. I believe you all have a certain understanding of the knowledge of "how WeChat Mini Programs can achieve multi-location identification on the map". 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.