您好,小程序模板欢迎您。
小程序模板
当前位置 : 首页> 小程序教程> uniapp微信小程序使用腾讯地图选点插件

uniapp微信小程序使用腾讯地图选点插件

在A页面获取当前经纬度之后跳转至B页面打开腾讯地图选点插件

1.使用 wx.getLocation() 获取当前地理位置

注意需要把微信开发者工具中的本地设置中的版本改为2.17.0,不然会报错


                wx.getLocation({
                    type: "wgs84",
                    success: function (res) {
                        console.log("当前位置的经度:" + res.longitude);
                        console.log("当前位置的纬度:" + res.latitude);
                        wx.setStorageSync("location", {
                            latitude: res.latitude,
                            longitude: res.longitude
                        })
                        uni.navigateTo({
                            url: "/pages/work/location"
                        });
                    },
                    fail: function (res) {
                        console.log("失败" + res);
                    }
                });

 2.使用小程序插件的相关配置

2.1使用腾讯地图 lbs.qq.com,控制台-应用管理-我的应用中,创建应用,并在相应的应用中创建Key。

注意勾选WebServiceAPI和微信小程序

3.manifest.json设置

web配置

小程序配置

4.在微信小程序官方后台 https://mp.weixin.qq.com/,添加插件

微信小程序官方后台-设置-第三方服务-插件管理” 里点击 “添加插件”,搜索 “腾讯位置服务地图选点” 申请,申请后小程序开发者可在小程序内使用该插件。

 

5.pages.json

在pages.json中配置plugins,参考 https://lbs.qq.com/miniProgram/plugin/pluginGuide/locationPicker

{
  "pages": [
    {
      "path": "pages/login",
      "style": {
        "navigationBarTitleText": "登录"
      }
    },
  ],

  "globalStyle": {
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "ZAGT",
    "navigationBarBackgroundColor": "#FFFFFF"
  },
  "plugins": {
    "chooseLocation": {
      "version": "1.0.10",
      "provider": "wx76a9a06e5b4e693e" // 地图选点的APPID
    }
  }
}

 6.使用,在A页面获取当前经纬度之后跳转至B页面打开腾讯地图选点插件

A页面






页面B

onShow()中,chooseLocation.getLocation()会得到地图上确认选点的数据






联系客服 意见反馈

签到成功!

已连续签到1天,签到3天将获得积分VIP1天

知道了