效果图如下
我这里实现的功能有:地图展示,标记位置,回到当前位置,点击医院地图切换到相应位置,拉起本地导航。下面就一一讲一下吧!
一、使用map展示地图
<map id="myMap" class="mapView" style="width: 100%; height: 588rpx;" latitude="{{latitude}}" longitude="{{longitude}}"
markers="{{markers}}" scale='16' show-location="true">
<cover-image src='../assets/local.png' class="locat" bindtap="goLocat"></cover-image>
</map>
latitude 纬度(数字)
longitude 经度(数字)
markers 标记点(数组)
scale 缩放级别,取值范围为3-20(数字)
show-location 显示带有方向的当前定位点(boolean)
更多属性查看官方文档
- cover-image 覆盖在原生组件之上的图片,我这里也就是回到当前位置的图片
二、使用wx.getLocation获取当前位置的经纬度
wx.getLocation({
type: 'gcj02', // 默认为 wgs84 返回 gps 坐标,gcj02 返回可用于 wx.openLocation 的坐标
isHighAccuracy: true, //开启高精度定位
success: (res) => {
this.setData({
latitude: res.latitude,
longitude: res.longitude,
});
},
})
三、在地图上标记坐标点
其实有更好的写法,自己改改吧,大概就是这个意思,maplist是需要标记的数据,markers是map中的markers
let maplist = this.data.maplist
for (let i = 0; i < maplist.length; i++) {
this.setData({
markers: this.data.markers.concat({
iconPath: "../assets/sign.png",//用来标记的图片
id: i,
latitude: maplist[i].lat,
longitude: maplist[i].lng,
width: 16,
height: 22,
}),
})
}
四、回到当前位置
// 回到当前位置
goLocat() {
let mapCtx = wx.createMapContext("myMap")
mapCtx.moveToLocation()
},
五、点击医院使地图切换到相应位置,及地图中心点是这个医院
在点击事件里面处理,改变map中的latitude
和longitude
的值即可
六、使用 wx.openLocation拉起本地导航
// 使用微信内置地图查看位置
wx.getLocation({
type: 'gcj02', //返回可以用于wx.openLocation的经纬度
success: (res) => {
wx.openLocation({
latitude: latitude,//目的地的纬度
longitude: longitude,//目的地的经度
name: addr, //打开后显示的地址名称
})
}
})
效果如下图: