微信小程序 腾讯地图SDK 获取当前地址实现解析

如何获取用户当前地址，这个就要先用到小程序的定位功能:定位官方文档

第一步获取当前定位

在js当中写

运行项目之后会有个这样的弹窗：

这是因为开发者需要说明获取用户地理位置的用途。

解决方法：

在app.json中增加permission属性。

这样就可以获取到用户的地理坐标了。

第二步讲当前定位转换程地址信息

这个功能需要用到腾讯地图SDK：官方文档

官方文档上使用SDK的步骤写的挺详细的，还带上了各种链接：

第4步的安全域名设置在你自己的小程序管理后台里设置

以上4步都完成后，将下载好的SDK文件放到项目里。

在页面js里引入SDK：

我们需要用到的是SKD里面的reverseGeocoder()方法，所以我们在获取到用户当前坐标后调用这个方法：

这样就将地址坐标转换成了地址，在页面上简单展示出来：

完整代码

最后贴上我的js完整代码，写的有点小啰嗦了，如果有什么不太懂的地方欢迎加我qq一起讨论下：546529770，谢谢~~

js

/**引入SDK核心类 */
var qqSDK = require('../../apis/qqmap-wx-jssdk.min.js')

Page({

 /**
  * 页面的初始数据
  */
 data: {
  latitude: '',
  longitude: '',
  positionData: ''
 },

 /**
  * 生命周期函数--监听页面加载
  */
 onLoad: function(options) {
  var _this = this

  /**实例化SDK核心类 */
  var qqMap = new qqSDK({
   key: '3B4BZ-QHNK3-HLX34-YKUQA-YDHCV-CHFFB' //必填
  });

  /**获取当前坐标 */
  wx.getLocation({
   success: function(res) {
    var latitude = res.latitude
    var longitude = res.longitude
    qqMap.reverseGeocoder({
     success: function(res) {
      var address = res.result.address;
      _this.setData({
       latitude: latitude,
       longitude: longitude,
       positionData: address
      });
     }
    })
   }
  })
 }
})

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 微信小程序 高德地图SDK详解及简单实例（源码下载）

    微信小程序 高德地图SDK详解及简单实例（源码下载）

    微信小程序 高德地图SDK: 简介 微信小程序 SDK 帮您在微信小程序中获取高德丰富的地址描述.POI和实时天气数据. 功能介绍 账号与Key的申请 注册成为高德开发者需要分三步: 第一步,注册高德开发者:第二步,去控制台创建应用:第三步,获取Key. 1注册高德开发者 2创建应用 3获取API key 获取API Key 入门指南 最后更新时间: 2017年1月9日 本指南是使用微信小程序SDK的快速入门指南. 第 1 步:下载并安装微信小程序开发工具 按照微信小程序开发文档下载并安装微信小

  • 微信小程序实现打开内置地图功能【附源码下载】

    微信小程序实现打开内置地图功能【附源码下载】

    本文实例讲述了微信小程序实现打开内置地图功能.分享给大家供大家参考,具体如下: 1.效果展示 2.关键代码 index.wxml布局文件代码 <button type="default" bindtap="openMap">打开地图</button> index.js逻辑文件代码 Page({ openMap:function(){ wx.getLocation({ type: 'gcj02', // 默认为 wgs84 返回 gps 坐标,

  • 微信小程序+腾讯地图开发实现路径规划绘制

    现象 我们想用微信小程序实现在map>组件上自定义显示导航路径,但是目前为止官方并未给出相应的方法实现,map>组件确实有绘制点对点连线的属性polyline,但是呢我们没有一系列的坐标集合也是画不出一条路径的, 更糟糕的是即便你内置微信小程序JavaScript SDK,它目前为止也不能给你相应的返回导航路径中所有坐标集合方法实现,不信你看介绍 解决方案 那我们只能用WebService API咯, 但是不要高兴的太早,根据文档,我们要的接口参数是酱紫的 那么我们开始写(下面是菜鸡版代码,非

  • 微信小程序把百度地图坐标转换成腾讯地图坐标过程详解

    微信小程序把百度地图坐标转换成腾讯地图坐标过程详解

    百度地图的经纬度放到腾讯地图里面解析地址,导致位置信息显示不正确,所以利用腾讯地图提供的API进行转换. 如果没有开发密钥(key),就到腾讯地图官方文档进行申请和下载qqmap-wx-jssdk.js 腾讯地图官方文档 申请步骤 填写信息 wxml代码 <map id='map' longitude="{{longitude}}" latitude="{{latitude}}" markers="{{markers}}" show-loc

  • 微信小程序 使用腾讯地图SDK详解及实现步骤

    微信小程序 使用腾讯地图SDK详解及实现步骤

    微信小程序 使用腾讯地图SDK详解及实现步骤 近期在做一款彩票服务类项目中用到了腾讯地图提供的小程序解决方案,拿来给大家分享一下! 使用起来非常简单,就是一些功能还有待完善. 官方文档:http://lbs.qq.com/qqmap_wx_jssdk/index.html 步骤: 申请开发者密钥(key):申请密匙 下载微信小程序JavaScriptSDK,微信小程序JavaScriptSDK v1.0 安全域名设置,需要在微信公众平台添加域名地址https://apis.map.qq.com

  • 微信小程序开发之map地图实现教程

    微信小程序开发之map地图实现教程

    前言 微信小程序地图操作比较简单,api也很少,使用map组件来展示.说到地图,那就先来看基础定位: 定位用到wx.getLocation(OBJECT)函数,代码如下: wx.getLocation({ type: 'wgs84', success: function(res) { var latitude = res.latitude var longitude = res.longitude var speed = res.speed var accuracy = res.accuracy

  • 微信小程序地图(map)组件点击(tap)获取经纬度的方法

    微信小程序中使用地图(map)组件,通过点击(tap)获取经纬度,按照官方的回应,暂时是没法做到的,从地图组件API多有残缺判断,怀疑是个实习生干的... 做个变通,适用性有限,请大家参考.基本思路就是在地图上铺满一层marker,从而通过点击marker获得经纬度. 复制代码 代码如下: <map id="map" longitude="102.324520" latitude="40.099994" scale="4"

  • 微信小程序 腾讯地图SDK 获取当前地址实现解析

    微信小程序 腾讯地图SDK 获取当前地址实现解析

    如何获取用户当前地址,这个就要先用到小程序的定位功能:定位官方文档 第一步获取当前定位 在js当中写 运行项目之后会有个这样的弹窗: 这是因为开发者需要说明获取用户地理位置的用途. 解决方法: 在app.json中增加permission属性. 这样就可以获取到用户的地理坐标了. 第二步讲当前定位转换程地址信息 这个功能需要用到腾讯地图SDK:官方文档 官方文档上使用SDK的步骤写的挺详细的,还带上了各种链接: 第4步的安全域名设置在你自己的小程序管理后台里设置 以上4步都完成后,将下载好的SD

  • 微信小程序中进行地图导航功能的实现方法

    前段时间一直都在做小程序做了两个月了,其中对于小程序还是有很不理解的地方看着一些大企业的小程序自己模仿其实还是有一些难度的,我觉得学习小程序看一遍文档是不够的我们要做的是看别人的例子对着文档一一对照! 好这次我们来开始我们的开发,其实微信小程序里面是不能导航的,原因是小程序的代码最多只能有1M,他的运行内存只能有10M,一个区域地图下载下来就不止1M了所以在应用内我们无法做到导航的,但是应用外呢! 我问过很多做安卓和IOS的同僚一般如果导航这个功能不是很重要的话就会放到应用外来做这个功能,但是高

  • 微信小程序基于高德地图API实现天气组件(动态效果)

    ​在社区翻腾了许久,没有找到合适的天气插件.迫不得已,只好借鉴互联网上的web项目,手动迁移到小程序中使用.现在分享到互联网社区中,帮助后续有需要的开发者. 1.组件介绍 1.1 组件效果预览图 ​小程序组件继承了外部样式colorui的色彩,但实际动画会根据父节点的color属性自动填充颜色,即使不引入colorui这个样式库,也可以在该组件引用外定义一个有color属性的块包裹该组件,同样可以达到如图的效果. 1.2 构造形式 1.3 支持的动画效果 简单介绍下,动画由3个部分组成 一个是主

  • 微信小程序用户位置权限的获取方法（拒绝后提醒）

    微信小程序获取用户当前位置有三个方式: 1. wx.getLocation(多与wx.openLocation一起用) 获取当前的精度.纬度.速度.不需要授权.当type设置为gcj02 返回可用于wx.openLocation的坐标 2. wx.chooseLocation 需要授权,打开地图选择位置 第一次调用方法时先出现 允许权限之后之后再出现 如果第一次就不允许,则一直调用wx.chooseLocation的fail方法 3. wx.openLocation 需要授权,使用微信内置地图查

  • 微信小程序使用map组件实现获取定位城市天气或者指定城市天气数据功能

    微信小程序使用map组件实现获取定位城市天气或者指定城市天气数据功能

    本文实例讲述了微信小程序使用map组件实现获取定位城市天气或者指定城市天气数据功能.分享给大家供大家参考,具体如下: 效果图 实现原理 采用高德地图微信小程序开发API(getWeather),如果 city 属性的值为空(或者没有city属性),默认返回定位位置的天气数据:如果 city 不为空,则返回 city 指定位置的天气数据. WXML <view class="map-weather"> <view><text>城市:</text&

  • 微信小程序之高德地图多点路线规划过程示例详解

    微信小程序之高德地图多点路线规划过程示例详解

    调用 如何调用高德api? 高德官方给出的https://lbs.amap.com/api/wx/summary/开放文档比较详细: 第一步,注册高德开发者 第二部,去控制台创建应用 即点击右上角的控制平台创建应用 创建应用绑定服务记得选择微信小程序:同时在https://lbs.amap.com/api/wx/gettingstarted中下载开发包 第三步,登陆微信公众平台在开发设置中将高德域名配置上 https://restapi.amap.com 第四步,打开微信开发者工具,打开微信小程

  • 微信小程序使用form表单获取输入框数据的实例代码

    微信小程序使用form表单获取输入框数据的实例代码

    本文讲述了微信小程序使用form表单获取输入框数据的实例代码.分享给大家供大家参考,具体如下: 1.效果展示 2.关键代码 index.wxml 用户名: 密码: 登录 重置 {{tip}}{{userName}}{{psw}} index.js Page({ data:{ // text:"这是一个页面" tip:'', userName:'', psw:'' }, formBindsubmit:function(e){ if(e.detail.value.userName.leng

  • 微信小程序扫描二维码获取信息实例详解

    微信小程序扫描二维码获取信息实例详解

    1.最简单的扫二维码获得信息. 首先,在网上找一个二维码生成网站,生成一个二维码,我用的是草料二维码,随便生成了一个二维码做测试. 就这个. 我搭建的界面如下: 如图可见,点击1中的"点我扫一扫",可以扫二维码,扫错了如2所示,扫对了如3所示."你傻不傻啊?"就是上图的二维码内容. 嗯,大家都不傻. 4是小程序的结构,就是快速模板建立的,index页面里的内容都删空了,替换了新的代码,其中wxss文件没有东西,因为并没有对界面进行设计. 其中index.wxml的代

  • 微信小程序mpvue点击按钮获取button值的方法

    在小程序里面是没有dom元素的,这个我们只要会小程序的应该都知道,但是在平时开发中我们偶尔会遇到需要点击某个元素获取它的值的情况,在这里给大家列举了两种情况解决方法 方式一:数据绑定 这种情况的话,对应的场景是只有一个按钮或元素调用这个方法的情况下的 在你的.vue文件中的data数据里面添加变量 data() { return { msg:'苏喂苏喂苏喂' }; getData(){ console.log( this.msg ) } 按钮上 <button @click="getDat

随机推荐