微信小程序使用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开发地图流程介绍的文章就介绍到这了,更多相关小程序开发地图内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • javascript实现淡蓝色的鼠标拖动选择框实例

    javascript实现淡蓝色的鼠标拖动选择框实例

    这篇文章主要介绍了javascript实现淡蓝色的鼠标拖动选择框,可实现鼠标拖动出现淡蓝色选择框的效果,涉及javascript鼠标事件及样式的操作技巧,需要的朋友可以参考下
    2015-05-05
  • 微信小程序textarea层级过高的解决方法

    微信小程序textarea层级过高的解决方法

    这篇文章主要给大家介绍了关于微信小程序textarea层级过高问题的解决方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-03-03
  • 用Javascript实现发送短信验证码间隔功能

    用Javascript实现发送短信验证码间隔功能

    这篇文章主要介绍了用Javascript实现发送短信验证码间隔功能,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2021-02-02
  • js隐式全局变量造成的bug示例代码

    js隐式全局变量造成的bug示例代码

    一段js代码遇到一个bug,由于中间的隐式全局变量造成的,通过谷歌浏览器的js调试器才找到问题所在,下面将代码与大家分享下
    2014-04-04
  • echarts地图区域显示不同颜色代码示例

    echarts地图区域显示不同颜色代码示例

    地图在我们日常的数据可视化分析中是很常见的一种展示手段,不仅美观而且很大气,这篇文章主要给大家介绍了关于echarts地图区域显示不同颜色的相关资料,需要的朋友可以参考下
    2023-10-10
  • 如何通过js实现图片预览功能【附实例代码】

    如何通过js实现图片预览功能【附实例代码】

    如何通过js实现图片预览功能呢?下面小编就为大家带来一篇用js实现图片预览功能。给大家做个参考吧,一起跟随小编过来看看
    2016-03-03
  • javascript数组拍平方法总结

    javascript数组拍平方法总结

    本篇文章给大家详细分析了javascript数组拍平的方法,对此有兴趣的朋友跟着小编一起学习下吧。
    2018-01-01
  • js+css3制作时钟特效

    js+css3制作时钟特效

    本文给大家汇总了2个JavaScript+css3实现的时钟特效的代码,非常的漂亮,有需要的小伙伴可以来参考下
    2016-10-10
  • 原生Js实现的画廊功能

    原生Js实现的画廊功能

    这篇文章主要介绍了原生Js实现的画廊功能,帮助大家更好的理解和学习使用JavaScript,感兴趣的朋友可以了解下
    2021-05-05
  • javascript实现禁止复制网页内容汇总

    javascript实现禁止复制网页内容汇总

    本文给大家汇总介绍了几种使用javascript和CSS实现禁止复制页面内容的方法,非常的实用,有需要的小伙伴可以参考下。
    2015-12-12

最新评论