关闭

微信小程序-自动定位并将经纬度解析为具体地址

时间: 2018-05-10阅读: 3552标签: 小程序

微信小程序-微信小程序可以通过API获取当前位置的经纬度,在微信小程序开发文档中可以找到这个API的使用示例:https://developers.weixin.qq.com/miniprogram/dev/api/location.html


但是需要获取具体地址 如:湖南省长沙市岳麓区****,就需要使用到外部的API(此处用到的是腾讯的位置服务),这是开发文档 里面有具体步骤和示例 http://lbs.qq.com/qqmap_wx_jssdk/index.html


自动获取地理位置可用于签到,具体实现如下: 

一、index.wxml 显示经纬度及地址数据  

<!--index.wxml-->
<view wx:if="{{latitude}}" mode="widthFix">纬度:{{latitude}}</view>
<view wx:if="{{longitude}}" mode="widthFix">经度:{{longitude}}</view>
<view wx:if="{{address}}" mode="widthFix">地址:{{address}}</view>

二、index.js 调用API获取数据 

//index.js
var QQMapWX = require('../../util/qqmap-wx-jssdk.js')  //引入获得地址的js文件
var qqmapsdk;
const app = getApp()
Page({
  data: {
   
    latitude: null,
    longitude: null,
    address: null,
    
  },
  onLoad: function () {
    this.getLocation();//一进来就得到地址
  },
  getLocation() {
    var that = this
    wx.getLocation({//调用API得到经纬度
      type: 'wgs84',
      success: function (res) {
        var speed = res.speed
        var accuracy = res.accuracy
        var latitude = res.latitude
        var longitude = res.longitude

        that.setData({
          latitude: res.latitude,
          longitude: res.longitude
        })
        //地址解析
        var demo = new QQMapWX({
          key: '****'// 这个KEY的获取方式在上面链接 腾讯位置服务的开发文档中有详细的申请密钥步骤
        });

        demo.reverseGeocoder({//地址解析
          location: {
            latitude: latitude,
            longitude: longitude
          },
          success: function (res) {
            console.log(res);
            //获得地址
            that.setData({
              address: res.result.address
            })
          },
          fail: function (res) {
            console.log(res);
          },
          complete: function (res) {
            console.log(res);
          }
        });
      }

    })
  }
})


 来源:https://blog.csdn.net/weixin_36708477/article/details/80254304


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/751

关闭

腾讯出品的微信小程序有哪些?

腾讯wifi一键连;识花君;企鹅医典;vgo微海报;腾讯AI体验中心;食物健康测评;腾讯地图+;微信辟谣助手;腾讯文档;多媒体AI平台;微云;微信发票助手

微信小程序非跳转式组件授权登录

大致逻辑:授权 -> 发送code到服务器获取session_key - > 保存在小程序缓存内 -> 调用wx.getUserInfo和session_key获取用户信息 -> 登录成功返回访问token -> 记录登录状态 -> 执行登录成功监听(失败则不监听)

如何微信小程序禁止下拉_解决小程序下拉出现空白的情况

在微信小程序中,用力往下拉动,页面顶部会出现一段空白的地方。 产品的需求不太允许这么做,会影响用户体验,查看文档发现可以使用enablePullDownRefresh这属性来实现,但是在部分ios端仍然可以下拉出现空白。那么该如何解决呢?

小程序开发注意事项_我的第一个小程序

业余时间学习了下小程序开发,整理一篇关于小程序开发需要注意的事项:后端接口域名必须使用https、不能直接进行dom节点操作、尽量使用es6的箭头函数、原生的组件层级是最高的等

微信小程序-页面跳转与参数传递

微信小程序页面跳转方式有很多种,可以像HTML中a标签一样添加标签进行跳转,也可以通过js中方法进行跳转。

小程序多余文本省略号显示

如何在 wxml 页面中截取数据?取数据想必大家都会,不就是 substring 吗?但是这种方法在 wxml 页面中是无效的。那还有 css 啊,不一样可以做到吗?但是个人觉得 css 复用性太差,暂不考虑。

小程序自定义tabbar占位问题

针对于小程序中自定义tabbar问题,有多种自定义方式。其中之一就是需要将原先系统自带的tabbar隐藏,调用,就是在小程序底部原先放置tabbar的内容会出现空白,仍然会出现占位问题。

把微信小程序异步API为Promise,简化异步编程

把微信小程序异步API转化为Promise。用Promise处理异步操作有多方便,谁用谁知道。微信官方没有给出Promise API来处理异步操作,而官方API异步的又非常多.

小程序开发的一些细节,你有注意吗?

我认为小程序是一个没有什么技术含量的东西,特别是现在有了组件库,而且小程序生态不断完善的情况下,只要对着文档慢慢写就好,就是时间的问题。然后这里也不是教大家怎么去写程序之类的,而是本人在经历过后的一些小建议

微信小程序如何实现跳转到其它小程序的功能

微信小程序目前已经支持跳出到其它小程序了。但是前提是2个小程序必须被同一个公众号关联,如果没有关联则无法打开,下面就实现小程序之间相互跳转的步骤。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!