微信小程式 接入騰訊地圖

微信小程式 接入騰訊地圖兩種接法

一、調用微信内置的騰訊地圖，擷取第三方軟體

點選選擇按鈕擷取第三方軟體

這個相對簡單，用的也比較多，配合以下兩個API使用

使用之前你需要在app.js中配置權限資訊

"permission": {
    "scope.userLocation": {
      "desc": "你的位置資訊将用于小程式位置接口的效果展示" 
    }
  },
           

在使用地圖的頁面使用

chooseMap(){  
    var that = this
    let location = that.data.location
    wx.getLocation({
      type: 'gcj02', //傳回可以用于wx.openLocation的經緯度
      success (res) { // 擷取目前位置的經緯度
         const latitude = res.latitude
         const longitude = res.longitude
       // const latitude = location.lat
       // const longitude = location.lng
        wx.openLocation({
          latitude,
          longitude,
          name:'東莞市虎門鎮白沙社群站北路1号',
          scale: 18
        })
      }
     })
  },
           

如果需要擷取具體位置對應的經緯度或者經緯度對應的具體位置，需要接入騰訊位置服務 ：https://lbs.qq.com/map/

具體步驟如下

1. 注冊 登入 點選控制台

   

   點選設定，配置如下，儲存

   

2. 點選開發文檔

   

   下載下傳核心類，放到項目當中，引入使用

   

   

   實作如下

routeMap() {
    var that  = this
    wx.getSetting({ // 擷取目前的設定
    success(res){
    //這裡判斷是否有位置權限
      if (!res.authSetting['scope.userLocation']) {
          wx.showModal({
          title: '提示',
          content: '擷取位置資訊',
          success:function(res){
            if(res.confirm==false){
              return false
            }
            wx.openSetting({ // 打開設定
              success(res) {
              //如果再次拒絕則傳回頁面并提示
              if (!res.authSetting['scope.userLocation']) {
              wx.showToast({
              title: '此功能需擷取位置資訊，請重新設定',
              duration: 3000,
              icon: 'none'
              })
              } else {
              //允許授權，調用地圖
                that.chooseMap()
                }
              }
            })
          }
          }) 
      } else {
      //如果有定位權限，調用地圖
      that.chooseMap()
      }
    }
   })
  },
  chooseMap(){
    var that = this
    let location = that.data.location
    wx.getLocation({
      type: 'gcj02', //傳回可以用于wx.openLocation的經緯度
      success (res) {
         const latitude = res.latitude
         const longitude = res.longitude
       // const latitude = location.lat
       // const longitude = location.lng
        wx.openLocation({
          latitude,
          longitude,
          name:'東莞市虎門鎮白沙社群站北路1号',
          scale: 18
        })
      }
     })
  },
           

二、找到微信小程式

然後進行相應配置開發…

未完待續。。。