微信小程序wx.chooseLocation地图的使用

简介: 微信小程序wx.chooseLocation地图的使用

一、申请开通

在小程序管理后台,「开发」-「开发管理」-「接口设置」中开通该接口权限,否则可能审核不通过

二、用法

1、配置地理位置用途说明

app.json中:

"permission": {
    "scope.userLocation": {
      "desc": "你的位置信息将用于小程序位置接口的效果展示" 
    }
 }
2.声明需配置的接口

在这里插入图片描述如果小程序中用到了上述接口,都需要在app.json中进行配置,否则上线成功后也用不了这个功能
app.json中:

"requiredPrivateInfos": ["getLocation", "chooseLocation", "chooseAddress"]
3.获取当前位置
    wx.getLocation({
      // wgs84 返回 gps 坐标,gcj02 返回可用于wx.openLocation的坐标
      type: 'gcj02',
      //获取位置成功
      success: function (res) {
        console.log(res)  //获取的的当前位置的详细信息,包含需要的坐标
      },
      //获取位置失败
      fail: function (err) {
        console.log("获取位置信息失败,请返回重试")
      },
      //接口调用结束的回调函数(调用成功、失败都会执行)
      complete: function (info) {
        console.log("完成")
      },
    })
4.根据坐标位置显示地图导航
wx.openLocation({
     //当前经纬度
  latitude: 31.232091,
  longitude: 121.493491,
  //缩放级别默认18,缩放比例为5-18
  scale: 18,
  //位置名
  name: '外滩',
  //详细地址
  address: '上海市上海市黄浦区延安东路与中山东二路交叉口东南',
  //成功打印信息
  success: function (res) {
  },
  //失败打印信息
  fail: function (err) {
    wx.showToast({
      title: '调用地图失败,请返回重试',
    })
  },
})
5.选择位置
wx.chooseLocation({
   success: function (res) {
      console.log(res); 
    },
    fail: function () {
    },
    complete: function () {
    }
})
相关文章
|
6月前
|
小程序 定位技术 API
【社区每周】小程序码支持沙箱调试;开发文档新增产品地图(1月第二期)
【社区每周】小程序码支持沙箱调试;开发文档新增产品地图(1月第二期)
47 0
|
5月前
|
小程序 定位技术
uniapp微信小程序地图全屏显示配送范围
uniapp微信小程序地图全屏显示配送范围
108 1
|
5月前
|
XML 小程序 JavaScript
微信小程序如何使用地图
微信小程序如何使用地图
195 4
|
4月前
|
小程序 定位技术 API
uniapp 开发微信小程序 --【地图】打开地图选择位置,打开地图显示位置(可开启导航)
uniapp 开发微信小程序 --【地图】打开地图选择位置,打开地图显示位置(可开启导航)
344 0
|
4月前
|
小程序 定位技术
【微信小程序-原生开发+TDesign】地图导航(wx.openLocation的使用)
【微信小程序-原生开发+TDesign】地图导航(wx.openLocation的使用)
79 0
|
6月前
|
小程序 安全 定位技术
高德地图实现-微信小程序地图导航
高德地图实现-微信小程序地图导航
303 0
|
6月前
|
小程序 定位技术 API
微信小程序实现地图功能(腾讯地图)
微信小程序实现地图功能(腾讯地图)
|
6月前
|
小程序 JavaScript 定位技术
微信小程序地图控件Map的使用
微信小程序地图控件Map的使用
166 0
|
6月前
|
小程序 定位技术 API
微信小程序引入地图
微信小程序引入地图
155 0
|
1月前
|
移动开发 小程序 数据可视化
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
215 3