首页 > 微信 > 详细

uni-app中小程序地图选点

时间:2021-06-09 18:35:23      阅读:56      评论:0      收藏:0      [点我收藏+]

最近在项目中要用到小程序地图选点,查了些许资料,特别在此记录一下,以便大家参考交流!,我选择用的是腾讯地图插件

实现效果:技术分享图片

 

 

 

 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>

好啦,这样就大功告成啦!

 

uni-app中小程序地图选点

原文:https://www.cnblogs.com/menxiaojin/p/14866987.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!