微信小程序 - 多地点标识(map)

Posted 2021-01-03 Sunsin

演示如下： 

 

 

 

 

wxml

1 <map id="map"  scale="{{scale}}" controls="{{controls}}" bindcontroltap="controltap" markers="{{markers}}" bindmarkertap="markertap" bindregionchange="regionchange" show-location style="width: 100%; height: 580px;"></map>

 

js

  1 let hospitalData = require(\'hospitalData\')
  2 Page({
  3   data: {
  4     centerX: 0.0,
  5     centerY: 0.0,
  6     //可能我标识的地点和你所在区域比较远，缩放比例建议5;
  7     scale:15,
  8     markers: [],
  9     controls: [{
 10       id: 1,
 11       iconPath: \'/image/location-control.png\',
 12       position: {
 13         left: 0,
 14         top: 10,
 15         width: 40,
 16         height: 40
 17       },
 18       clickable: true
 19     }]
 20   },
 21   onReady: function(e) {
 22     // 使用 wx.createMapContext 获取 map 上下文 
 23     this.mapCtx = wx.createMapContext(\'myMap\')
 24   },
 25 
 26   onLoad: function() {
 27     console.log(\'地图定位！\')
 28     let that = this
 29     wx.getLocation({
 30       type: \'gcj02\', //返回可以用于wx.openLocation的经纬度
 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   },
 43 
 44   /**
 45    * 标示点移动触发
 46    */
 47   regionchange(e) {
 48     console.log(e.type)
 49   },
 50 
 51   /**
 52    * 点击标识点触发
 53    */
 54   markertap(e) {
 55     console.log(e)
 56   },
 57 
 58   /**
 59    * control控件点击时间
 60    */
 61   controltap(e) {
 62     console.log(e.controlId)
 63     this.moveToLocation()
 64   },
 65 
 66 
 67   /**
 68    * 获取医院标识
 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   },
 78 
 79   /**
 80    * 移动到自己位置
 81    */
 82   moveToLocation: function() {
 83     let mpCtx = wx.createMapContext("map");
 84     mpCtx.moveToLocation();
 85   },
 86 
 87 
 88   /**
 89    * 还有地图标识，可以在name上面动手
 90    */
 91   createMarker(point) {
 92     let latitude = point.latitude;
 93     let longitude = point.longitude;
 94     let marker = {
 95       iconPath: "/image/location.png",
 96       id: point.id || 0,
 97       name: point.name || \'\',
 98       latitude: latitude,
 99       longitude: longitude,
100       width: 25,
101       height: 48
102     };
103     return marker;
104   }
105 })

 

hospitalData.js （模拟数据）

 1 module.exports = [{
 2     "id": 1,
 3     "name": "永州市中心医院",
 4     "longitude": "111.62852107566833",
 5     "latitude": "26.42142999357519"
 6   },
 7   {
 8     "id": 2,
 9     "name": "永州市中医院",
10     "longitude": "111.5972679762268",
11     "latitude": "26.44470581245983"
12   }
13 ]

 

运行示例时，建议放在同一目录下.