浮标
就是地图上不随地图移动的图标,直接在map标签外设置cover-view,里面包裹cover-image,样式使用绝对定位即可。比如地图缩小按钮标签显示在地图右上角:
.wxml
<!-- 缩小 -->
<map>...</map>
<!-- 缩小 -->
<cover-view class='cover-smaller'>
<cover-image class='icon-set' bindtap='setSmallerClick' src='../../static/images/ic_smaller.png' />
</cover-view>
.wxss
.cover-smaller {
width: 100rpx;
height: 100rpx;
position: absolute;
top: 20rpx;
right: 10rpx;
display: flex;
justify-content: center;
align-items: center;
}
.
.icon-set{
width: 70rpx;
height: 70rpx;
background: white;
border-radius: 10%;
}
定位
在地图页onLoad方法中调用微信提供的定位方法即可,如下:
.xml
<view>
<map class="map" longitude="{{longitude}}" latitude="{{latitude}}" show-location></map>
</view>
.js
注意:定位之前要授权
onLoad: function (options) {
//授权
this.locationAuth();
},
locationAuth:function(){
wx.getSetting({
success: (res) => {
console.log(JSON.stringify(res))
// res.authSetting['scope.userLocation'] == undefined 表示 初始化进入该页面
// res.authSetting['scope.userLocation'] == false 表示 非初始化进入该页面,且未授权
// res.authSetting['scope.userLocation'] == true 表示 地理位置授权
if (res.authSetting['scope.userLocation'] != undefined && res.authSetting['scope.userLocation'] != true) {
wx.showModal({
title: '请求授权当前位置',
content: '需要获取您的地理位置,请确认授权',
success: function (res) {
if (res.cancel) {
wx.showToast({
title: '拒绝授权',
icon: 'none',
duration: 1000
})
} else if (res.confirm) {
wx.openSetting({
success: function (dataAu) {
if (dataAu.authSetting["scope.userLocation"] == true) {
wx.showToast({
title: '授权成功',
icon: 'success',
duration: 1000
})
//再次授权,调用wx.getLocation的API
this.showMaps();
} else {
wx.showToast({
title: '授权失败',
icon: 'none',
duration: 1000
})
}
}
})
}
}
})
} else if (res.authSetting['scope.userLocation'] == undefined) {
//调用wx.getLocation的API
this.showMaps();
}
else {
//调用wx.getLocation的API
this.showMaps();
}
}
})
},
//定位
showMaps:function(){
var that = this;
wx.showLoading({
title: "定位中",
mask: true
})
wx.getLocation({
type: 'gcj02',
altitude: true, //高精度定位 定位成功,更新定位结果
success: (res) => {
var latitude = res.latitude
var longitude = res.longitude
that.setData({
latitude: latitude,
longitude: longitude,
})
},
// 定位失败回调
fail: function () {
wx.showToast({
title: "定位失败le",
})
},
complete: function () {
//隐藏加载框
wx.hideLoading()
}
})
},
并且在app.json文件中生命权限
"pages": [
........
],
"permission": {
"scope.userLocation": {
"desc": "你的位置信息将用于小程序位置接口的效果展示"
}
},
注意:uniapp开发时这里有个坑,需要检查下manifest.json的配置里面,微信小程序配置是否勾选位置接口选项,申请原因填上面desc的内容即可
浮标、定位成功结果展示: