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

浮標、定位成功結果展示：