小程序map实现 浮标、定位

浮标、定位"/>

小程序map实现 浮标、定位

浮标

就是地图上不随地图移动的图标，直接在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的APIthis.showMaps();} else {wx.showToast({title: '授权失败',icon: 'none',duration: 1000})}}})}}})} else if (res.authSetting['scope.userLocation'] == undefined) {//调用wx.getLocation的APIthis.showMaps();}else {//调用wx.getLocation的APIthis.showMaps();}}})},//定位showMaps:function(){var that = this;wx.showLoading({title: "定位中",mask: true})wx.getLocation({type: 'gcj02',altitude: true, //高精度定位  定位成功，更新定位结果success: (res) => {var latitude = res.latitudevar longitude = res.longitudethat.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的内容即可

浮标、定位成功结果展示：