微信小程序使用wx.chooseLocation开发地图怎么做

 更新时间:2022年12月26日 09:57:00   作者:落雪小轩韩  
这篇文章主要介绍了微信小程序使用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 () {
    }
})

到此这篇关于微信小程序使用wx.chooseLocation开发地图流程介绍的文章就介绍到这了,更多相关小程序开发地图内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 详解JVM系列之内存模型

    详解JVM系列之内存模型

    JVM是一种用于计算设备的规范,它是一个虚构出来的机器,是通过在实际的计算机上仿真模拟各种功能实现的。JVM的内存区域可以被分为:线程、栈、堆、静态方法区。本文将介绍JVM的内存模型,感兴趣的小伙伴,可以参考下
    2021-06-06
  • 屏蔽F1~F12的快捷键的js函数

    屏蔽F1~F12的快捷键的js函数

    keyCod从113-123分别禁用了F2-F12键,13禁用了回车键(Enter),8禁用了退格键(BackSpace)
    2010-05-05
  • JavaScript实现表格快速变色效果代码

    JavaScript实现表格快速变色效果代码

    这篇文章主要介绍了JavaScript实现表格快速变色效果的方法,通过javascript数组遍历结合时间函数来实现表格快速变色的功能,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-08-08
  • 页面加载完毕后滚动条自动滚动一定位置

    页面加载完毕后滚动条自动滚动一定位置

    希望页面加载完毕后向左自动滚动一定位置,下面有个不错的方法可以轻松帮大家实现下
    2014-02-02
  • TypeScript中交叉类型和联合类型的区别详解

    TypeScript中交叉类型和联合类型的区别详解

    联合类型(Union Types)和交叉类型(Intersection Types)是 TypeScript 中的两种高级类型,它们都用于组合多个类型并生成新的类型,但它们两者之间的用法不一样,本文小编就给大家讲讲TypeScript中交叉类型和联合类型的区别,需要的朋友可以参考下
    2023-09-09
  • 微信小程序开发常用功能汇总

    微信小程序开发常用功能汇总

    这篇文章主要介绍了微信小程序开发常用功能,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-02-02
  • javascript实现检验的各种规则

    javascript实现检验的各种规则

    这篇文章主要介绍了javascript实现检验的各种规则,涉及javascript针对手机号、邮箱、网址、汉字及图片等相关检测技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-07-07
  • Openlayers3实现车辆轨迹回放功能

    Openlayers3实现车辆轨迹回放功能

    这篇文章主要介绍了Openlayers3实现车辆轨迹回放功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-09-09
  • JavaScript中string对象

    JavaScript中string对象

    和JAVA中String对象用处一样啊,javascript中的String对象也有自己的方法,和JAVA中的类似。
    2015-06-06
  • 下一代Bootstrap的5个特点 超酷炫!

    下一代Bootstrap的5个特点 超酷炫!

    下一代Bootstrap的5个特点,超酷炫,你还犹豫什么,赶紧来学习吧
    2016-06-06

最新评论