小程序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的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的内容即可

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