uniapp调用腾讯地图功能

1.腾讯地图官网

 腾讯位置服务 - 立足生态,连接未来

2.我的应用添加密钥

uniapp调用腾讯地图功能_第1张图片

 3获取密钥后登录微信公众平台

小程序

 4进入设置第三方设置添加插件uniapp调用腾讯地图功能_第2张图片

 5进入开发管理后开启服务

uniapp调用腾讯地图功能_第3张图片

5.5

在manifest.json中引入

        "permission" : {
            "scope.userLocation" : {
                "desc" : "正在获取您的位置"
            }
        },
        "plugins" : {
            "chooseLocation" : {
                "version" : "1.0.6",
                "provider" : "wx76a9a06e5b4e693e"
            }
        }

6代码

    onShow() {

        const chooseLocation = requirePlugin('chooseLocation')

        const location = chooseLocation.getLocation();

        console.log('ss',location)

        if (location) {

            this.provinces = location.province

            this.citys = location.city

            this.areas = location.district

        }

    },

给个点击事件

        getusermapinfo() {

            uni.getLocation({

                type: 'gcj02', //腾讯地图使用gcj02获取位置坐标

                success(res) {

                    //使用在腾讯位置服务申请的key(必填)

                    const key = 'PG2BZ-CALKF-S2XJM-JKJRB-XJOJ5-HLFTR';

                    //调用插件的app的名称(必填)

                    const referer = '调用插件的app的名';

                    wx.navigateTo({

                        url: 'plugin://chooseLocation/index?key=' + key + '&referer=' + referer

                    });

                },

                fail(err) {

                    //这里处理用户点击拒绝或者误操作拒绝的办法

                    uni.showModal({

                        title: '提示',

                        content: '您未开启获取位置权限,请点击确定去开启权限!',

                        success(res) {

                            if (res.confirm) {

                                uni.openSetting({}); //跳转微信小程序设置,手动打开获取位置

                            }

                        }

                    });

                }

            });

        },

你可能感兴趣的:(uni-app)