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

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

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

以下是具体做法：

wxml

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

js

1lethospitalData=require('hospitalData')2Page({3data:{4centerX:0.0,5centerY:0.0,6//可能我标识的地点和你所在区域比较远，缩放比例建议5;7scale:15,8markers:[],9controls:[{10id:1,11iconPath:'/image/location-control.png',12position:{13left:0,14top:10,15width:40,16height:4017},18clickable:true19}]20},21onReady:function(e){22//使用wx.createMapContext获取map上下文23this.mapCtx=wx.createMapContext('myMap')24},2526onLoad:function(){27console.log('地图定位！')28letthat=this29wx.getLocation({30type:'gcj02',//返回可以用于wx.openLocation的经纬度31success:(res)=>{32letlatitude=res.latitude;33letlongitude=res.longitude;34letmarker=this.createMarker(res);35this.setData({36centerX:longitude,37centerY:latitude,38markers:this.getHospitalMarkers()39})40}41});42},4344/**45*标示点移动触发46*/47regionchange(e){48console.log(e.type)49},5051/**52*点击标识点触发53*/54markertap(e){55console.log(e)56},5758/**59*control控件点击时间60*/61controltap(e){62console.log(e.controlId)63this.moveToLocation()64},656667/**68*获取医院标识69*/70getHospitalMarkers(){71letmarkers=[];72for(letitemofhospitalData){73letmarker=this.createMarker(item);74markers.push(marker)75}76returnmarkers;77},7879/**80*移动到自己位置81*/82moveToLocation:function(){83letmpCtx=wx.createMapContext("map");84mpCtx.moveToLocation();85},868788/**89*还有地图标识，可以在name上面动手90*/91createMarker(point){92letlatitude=point.latitude;93letlongitude=point.longitude;94letmarker={95iconPath:"/image/location.png",96id:point.id||0,97name:point.name||'',98latitude:latitude,99longitude:longitude,100width:25,101height:48102};103returnmarker;104}105})

hospitalData.js （模拟数据）

1module.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]

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

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