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


演示如下: 

 

 

 

 

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 ]

 

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


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM