文章目錄

• • • • • • 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

直接搜索騰訊位置服務地圖選點插件即可

準備工作：登錄微信公眾平臺后，添加的插件，如上圖

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

3. HBuilder配置

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

4. 配置代碼

實現代碼【上面鏈接官方都有】
manifest.json

/* 小程序特有相關 */"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(); // 如果點擊確認選點按鈕，則返回選點結果對象，否則返回nullconsole.log("您所選擇的位置：", location);if(location){this.chooseLocation = location.address;}},onUnload() {// 頁面卸載時設置插件選點數據為null，防止再次進入頁面，geLocation返回的是上次選點結果chooseLocation.setLocation(null);},methods: {getAddress() {const key = '4DABZ-MTZ2R-PZLW2-WX6FG-W5IXE-APFAF'; //使用在騰訊位置服務申請的keyconst 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>

uni-app中使用騰訊地圖sdk（解析經緯度）獲取用戶所在位置信息
https://gblfy.blog.csdn.net/article/details/122266600

總結

以上是生活随笔為你收集整理的uni-app中使用腾讯位置服务实现小程序地图选点功能的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。