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

演示如下：

wxml

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

js

 let hospitalData = require('hospitalData')
 Page({
   data: {
     centerX: 0.0,
     centerY: 0.0,
     //可能我标识的地点和你所在区域比较远，缩放比例建议5;
     scale:15,
     markers: [],
     controls: [{
       id: 1,
       iconPath: '/image/location-control.png',
       position: {
         left: 0,
         top: 10,
         width: 40,
         height: 40
       },
       clickable: true
     }]
   },
   onReady: function(e) {
     // 使用 wx.createMapContext 获取 map 上下文
     this.mapCtx = wx.createMapContext('myMap')
   },

   onLoad: function() {
     console.log('地图定位！')
     let that = this
     wx.getLocation({
       type: 'gcj02', //返回可以用于wx.openLocation的经纬度
       success: (res) => {
         let latitude = res.latitude;
         let longitude = res.longitude;
         let marker = this.createMarker(res);
         this.setData({
           centerX: longitude,
           centerY: latitude,
           markers: this.getHospitalMarkers()
         })
       }
     });
   },

   /**
    * 标示点移动触发
    */
   regionchange(e) {
     console.log(e.type)
   },

   /**
    * 点击标识点触发
    */
   markertap(e) {
     console.log(e)
   },

   /**
    * control控件点击时间
    */
   controltap(e) {
     console.log(e.controlId)
     this.moveToLocation()
   },

   /**
    * 获取医院标识
    */
   getHospitalMarkers() {
     let markers = [];
     for (let item of hospitalData) {
       let marker = this.createMarker(item);
       markers.push(marker)
     }
     return markers;
   },

   /**
    * 移动到自己位置
    */
   moveToLocation: function() {
     let mpCtx = wx.createMapContext("map");
     mpCtx.moveToLocation();
   },

   /**
    * 还有地图标识，可以在name上面动手
    */
   createMarker(point) {
     let latitude = point.latitude;
     let longitude = point.longitude;
     let marker = {
       iconPath: "/image/location.png",
       id: point.id || 0,
       name: point.name || '',
       latitude: latitude,
       longitude: longitude,
       width: 25,
       height: 48
     };
     return marker;
   }
 })

hospitalData.js （模拟数据）

 module.exports = [{
     "id": 1,
     "name": "永州市中心医院",
     "longitude": "111.62852107566833",
     "latitude": "26.42142999357519"
   },
   {
     "id": 2,
     "name": "永州市中医院",
     "longitude": "111.5972679762268",
     "latitude": "26.44470581245983"
   }
 ]

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