在页面中引入Map组件
<map
id="myMap"
style="width: 100%; height: 510rpx;"
latitude="{{latitude}}"
longitude="{{longitude}}"
bindtap="maptap"
bindregionchange="bindregionchange"
bindpoitap="maptap"
enable-zoom="{{true}}"
scale="{{scale}}"
min-scale="4"
markers="{{markers}}"
polygons="{{polygon}}"
>
</map>
参数
核心: latitude,longitude表示当前显示的位置坐标,bindtap绑定地图的点击事件,bindregionchange监听地图视野变化,bindpoitap点击地图poi点时触发(处理点击地图上的某些图标或者轮廓线不触发点击事件问题),enable-zoom是否支持缩放,scale缩放等级(3~20),min-scale 、max-scale最小最大缩放等级,markers地图标点集合,polygons地图上画范围(轮廓)的集合
其他的一些参数,参考微信小程序开发文档Map
获取当前定位
1、去微信公众平台,开发-开发管理-接口设置,开通wx.getFuzzyLocation获取位置接口使用权限
2、在app.json文件中配置scope.userFuzzyLocation
"permission":{
"scope.userInfo":{
"desc": "你的信息将用于小程序平台用户登录"
},
"scope.userFuzzyLocation": {
"desc": "你的位置信息将用于小程序为您匹配最近的机构"
}
},
3、页面中使用
// 获取当前定位
getLocation(){
let that = this
wx.getFuzzyLocation({
type: 'wgs84',
success (res) {
// 当前位置坐标
const latitude = res.latitude;
const longitude = res.longitude;
},
fail(err) {
},
})
},
markers地图标点
markers是一个数组,可以添加一个或多个标点,数组每一项对象参数具体如下:
参数:
例如:
let obj = {
id: 12345,
latitude:that.data.latitude,
longitude:that.data.longitude,
width:30,
height:44,
alpha:1,
zIndex: 6,
callout:{
content:`${str}(${res.data.data})`,
display:'ALWAYS',
padding:5,
borderRadius:6,
color:'#ff0000'
}
}
this.setData({
markers:[obj]
})
效果:
polygons地图范围画圈
polygons是一个数组,可以画一个或多个范围封闭的范围,数组每一项对象参数具体如下,其中核心就是points,是一个由一组组坐标组成的数组集合,points里的坐标点连线组成了一个封闭的区域范围:
参数:
例如:
其中p就是地图坐标点集合
arr.push({
points: p,
fillColor: "#4F94CD33",
strokeColor: "#2196f3",
strokeWidth: 2,
zIndex: 5,
dashArray:[5,5]
})
this.setData({
polygon:arr
})
效果:
一个:
多个: