微信小程序怎么实现在地图上多地点标识

这篇文章主要介绍了微信小程序怎么实现在地图上多地点标识的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇微信小程序怎么实现在地图上多地点标识文章都会有所收获，下面我们一起来看看吧。

以下是具体做法：

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: 4017 },18 clickable: true19 }]20 },21 onReady: function(e) {22 // 使用 wx.createMapContext 获取 map 上下文23 this.mapCtx = wx.createMapContext('myMap')24 },2526 onLoad: function() {27 console.log('地图定位！')28 let that = this29 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 },4344 /**45 * 标示点移动触发46 */47 regionchange(e) {48 console.log(e.type)49 },5051 /**52 * 点击标识点触发53 */54 markertap(e) {55 console.log(e)56 },5758 /**59 * control控件点击时间60 */61 controltap(e) {62 console.log(e.controlId)63 this.moveToLocation()64 },656667 /**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 },7879 /**80 * 移动到自己位置81 */82 moveToLocation: function() {83 let mpCtx = wx.createMapContext("map");84 mpCtx.moveToLocation();85 },868788 /**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: 48102 };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 ]

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

关于“微信小程序怎么实现在地图上多地点标识”这篇文章的内容就介绍到这里，感谢各位的阅读！相信大家对“微信小程序怎么实现在地图上多地点标识”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注亿速云行业资讯频道。