uni-app中使用騰訊位置服務實作小程式地圖選點功能

文章目錄

• ​​1. 官方文檔​​
• ​​2. 小程式添加插件​​
• ​​3. HBuilder配置​​
• ​​4. 配置代碼​​
• ​​5. 頁面代碼​​

1. 官方文檔

技術標明（地圖選點插件）

（對應官網：​​https://lbs.qq.com/miniProgram/plugin/pluginGuide/locationPicker​​ ）

2. 小程式添加插件

去微信小程式中-設定

​​https://mp.weixin.qq.com/wxamp/basicprofile/thirdauth?token=1361472091&lang=zh_CN​​

直接搜尋​

​騰訊位置服務地圖選點​

​插件即可

準備工作：登入微信公衆平台後，添加的插件，如上圖

1. 如果是微信小程式則直接按照，文檔給定的4項步驟配置完成

3. HBuilder配置

** 如果使用uni-app開發的小程式，配置的位置 HBuilder工具中注意 **

如圖：

4. 配置代碼

"mp-weixin": {
    "appid": "wx6a968da933xxxxxx",
    "setting": {
      "urlCheck": false,
      "es6": true
    },
    "usingComponents": true,
    "permission": {
      "scope.userLocation": {
        "desc": "你的位置資訊将用于小程式定位"
      }
    },
    "plugins": {
      "chooseLocation": {
        "version": "1.0.5",
        "provider": "wx76a9a06e5b4e693e"
      }
    }
  },      

5. 頁面代碼

<template>
  <view>
    您已選擇：{{chooseLocation}}
  </view>
</template>

<script>
  export default {
    data() {
      return {
        chooseLocation: '中國',

      };
    },
    onLoad() {
      this.getAddress();

    },
    // 從地圖選點插件傳回後，在頁面的onShow生命周期函數中能夠調用插件接口，取得選點結果對象
    onShow() {
      const chooseLocation = requirePlugin('chooseLocation');
      const location = chooseLocation.getLocation(); // 如果點選确認選點按鈕，則傳回選點結果對象，否則傳回null
      console.log("您所選擇的位置：", location);
      if(location){
        this.chooseLocation = location.address;
      }
      
    },
    onUnload() {
      // 頁面解除安裝時設定插件選點資料為null，防止再次進入頁面，geLocation傳回的是上次選點結果
      chooseLocation.setLocation(null);
    },
    methods: {
      getAddress() {
        const key = '4DABZ-MTZ2R-PZLW2-WX6FG-W5IXE-APFAF'; //使用在騰訊位置服務申請的key
        const referer = '那年綠蔭下白裙的你'; //調用插件的app的名稱
        const location = JSON.stringify({
          latitude: 39.89631551,
          longitude: 116.323459711
        });
        const category = '生活服務,娛樂休閑';
        wx.navigateTo({
          url: 'plugin://chooseLocation/index?key=' + key + '&referer=' + referer + '&category=' + category
        });
      },

    }
  };
</script>

<style lang="scss" scoped>
</style>