微信小程序接入百度地图(微信小程序插件)使用文档

第一步配置域名

  1. :在微信公众平台登录后配置服务域名称:https://apis.map.qq.com

第二步申请密钥

  1. 申请开发者密钥申请地址


第三步使用插件

  1. 选择添加插件

  2. 搜索腾讯位置服务地图选点

  3. 选择要授权的小程序

  4. 授权完毕会在这里显示插件信息

第四步查看使用文档

  1. 跳转至文档查看

  2. 跳转后点击开发文档

  3. app.json中进行相关的配置

javascript 复制代码
//引入插件包
  "plugins": {
        "chooseLocation": {
          "version": "1.0.10",
          "provider": "wx76a9a06e5b4e693e"  //这里使用默认未修改
        }
      },
//设置定位授权
   "permission": {
        "scope.userLocation": {
            "desc": "你的位置信息将用于小程序定位"
        }
    },
  1. 页面调用
javascript 复制代码
    const key = ''//输入当前的key
        wx.getLocation({
            type: 'gcj02', //wgs84 返回 gps 坐标,gcj02 返回可用于 wx.openLocation 的坐标
            success: res => {
                console.log(res);
                const {latitude,longitude} = res
                const key = key; //使用在腾讯位置服务申请的key
                const referer = 'numberApp'; //调用插件的app的名称
                const location = JSON.stringify({
                latitude: latitude,
                longitude: longitude
                });
                const category = '生活服务,娱乐休闲';
                wx.navigateTo({
                url: `plugin://chooseLocation/index?key=${key}&referer=${referer}&location=${location}&category=${category}`
                })
            },
            fail: error => {
                console.log(error);

            }
        })

第五步页面展示

  1. 点击上面方法跳转后会到地图页面

2.点击搜索后会有模糊查询

  1. 地址选择完成后点击确认地点,会在当前页面的onShow中返回地点信息
javascript 复制代码
const chooseLocation = requirePlugin('chooseLocation')
const location = chooseLocation.getLocation(); // 如果点击确认选点按钮,则返回选点结果对象,否则返回null
console.log(location);
if(that.data.locaStatus && location !== null) {
     if(that.data.locaStatus == 1) {
          that.setData({
              'userInfo.pcsqCfd': location.name
          })
      } else {
          let district = location.district
          that.setData({
              'userInfo.pcsqMdd': location.name
          })
          //我做的是输入用车起始地和目的地后判断用车范围
          const data = districtData.some(item=>item == district)
          if(!data) {
              setTimeout(()=>{
                  wx.showToast({
                      title: "用车超出范围,请重新选择",
                      icon: 'none',
                      duration: 2000
                  });
                  that.setData({
                      'userInfo.pcsqMdd':""
                  })
              },1000)
          }
      }
  }

附加配额使用

  1. 账户额度:对不同的接口进行额度分配

  2. Key额度:可以查看今天的接口使用情况

  3. 调用统计:统计今日的情况用曲线图展示

说明:以上设置可在微信小程序中使用百度地图插件,自定义地图使用不包含

相关推荐
说私域2 分钟前
基于开源 AI 智能名片、S2B2C 商城小程序的用户获取成本优化分析
人工智能·小程序
mosen8682 分钟前
Uniapp去除顶部导航栏-小程序、H5、APP适用
vue.js·微信小程序·小程序·uni-app·uniapp
qq22951165021 小时前
微信小程序的汽车维修预约管理系统
微信小程序·小程序·汽车
尚梦8 小时前
uni-app 封装刘海状态栏(适用小程序, h5, 头条小程序)
前端·小程序·uni-app
小飞哥liac11 小时前
微信小程序的组件
微信小程序
stormjun12 小时前
Java基于微信小程序的私家车位共享系统(附源码,文档)
java·微信小程序·共享停车位·私家车共享停车位小程序·停车位共享
paopaokaka_luck12 小时前
基于Spring Boot+Vue的助农销售平台(协同过滤算法、限流算法、支付宝沙盒支付、实时聊天、图形化分析)
java·spring boot·小程序·毕业设计·mybatis·1024程序员节
Bessie23415 小时前
微信小程序eval无法使用的替代方案
微信小程序·小程序·uni-app
shenweihong15 小时前
javascript实现md5算法(支持微信小程序),可分多次计算
javascript·算法·微信小程序
蜕变菜鸟15 小时前
小程序跳转另一个小程序
小程序