uni-app中小程序地圖選點

最近在項目中要用到小程序地圖選點，查了些許資料，特別在此記錄一下，以便大家參考交流！，我選擇用的是騰訊地圖插件

實現效果：

 

 

 

 1、去小程序開通騰訊騰訊位置服務

 

 

 

2、按照要求一步步操作，申請秘鑰，添加項目  https://lbs.qq.com?lbs_invite=Y9PRFLY

3、選擇設置，三方設置，添加的時候選擇“騰訊位置服務地圖選點”

 

 

 4、uni-app中頁面配置：

 

 

 https://lbs.qq.com/miniProgram/plugin/pluginGuide/locationPicker

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 = ''; //使用在騰訊位置服務申請的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
                });
            },
        }
    }
</script>

<style>

</style>

好啦，這樣就大功告成啦！