一 概述
- wx.getLocation获取用户当前位置信息
- map组件的基础属性(显示带有方向的当前定位点,显示指南针,开启卫星图)
- map添加标记点marker
二 map使用-当前不是定位位置
2.1 布局文件(index.wxml)
<map id="map"></map>
2.2 样式文件(index.wxss)-全屏
map{
height: 100vh;
width: 100vw;
}
2.3 效果图
三 map获取当前位置显示(添加精度和纬度)
3.1 布局文件(index.wxml)
<map id="map" longitude="{{longitude}}" latitude="{{latitude}}"></map>
3.2 逻辑文件(index.js)—获取当前位置设置精度和纬度
onLoad: function (options) {
wx.getLocation({
type:'gcj02',
success:res=>{
this.setData({
longitude: res.longitude,
latitude: res.latitude
})
}
})
},
3.3 权限授予
3.3.1 未授权前
3.3.2 点击查看详情,跳转小程序位置授权
{
"pages": ["pages/index/index"],
"permission": {
"scope.userLocation": {
"desc": "你的位置信息将用于小程序位置接口的效果展示" // 高速公路行驶持续后台定位
}
}
}
说明:
- 将上述代码配置到app.js下
3.3.4 保存后,显示获取位置对话框
3.3.5 允许后,显示当前位置视图
四 map组件的基础属性
4.1 地图基础属性-仅列出几项
属性 | 类型 | 说明 |
---|---|---|
show-location | boolean | 显示带有方向的当前定位点 |
show-compass | boolean | 显示指南针 |
enable-satellite | boolean | 是否开启卫星图 |
4.2 布局文件(index.wxml)
<map id="map" longitude="{{longitude}}" latitude="{{latitude}}" show-location show-compass enable-satellite></map>
4.3 效果图
五 map添加标记点marker
5.1 布局文件(index.wxml)
<map id="map" longitude="{{longitude}}" latitude="{{latitude}}" markers="{{markers}}" show-location show-compass enable-satellite></map>
5.2 逻辑文件(index.js)-addMark
5.2.1 addMark函数
addMark(res){
var marker=[]
marker.push({
id:1, //标记点 id
width:50,
longitude: res.longitude,
latitude: res.latitude,
label:{
content:'我的位置',
color:'#f00',
fontSize:20
},
callout:{
content:'气泡',
color:"#f00",
fontSize:30
},
iconPath:'/images/center.png'
})
this.setData({
markers:marker
})
},
5.2.2 位置获取成功后,调用添加addMark函数
onLoad: function (options) {
wx.getLocation({
type:'gcj02',
success:res=>{
this.setData({
longitude: res.longitude,
latitude: res.latitude
})
this.addMark(res)
}
})
},