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

更新日期: 2018-05-10阅读量: 4704标签: 小程序

微信小程序-微信小程序可以通过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.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

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

微信小程序开发中遇到的坑

开发小程序的过程中踩的坑不可谓不多,而有些坑也实在是让人郁闷,不扒一扒难以平我心头之愤呐。

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

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

小程序插件怎么玩?有赞和千万级用户的“群里有事”做了一次示范

小程序插件让大的公司赋能外部开发者变得非常方便,极大降低了中小开发者开发丰富的小程序应用的门槛,未来的发展是很值得期待的。尤其是国庆节前夕,微信公布的关于小程序跳小程序的新政策,极大地限制了不同主体之间小程序互跳的自由度

小程序组件开发_小程序实现自定义组件的多种方式

在小程序中,目前也支持简单的组件化编程,可以把页面通用功能模块抽象成自定义组件,以以便在不同的页面中复用,提供代码可读性,降低维护成本,这篇文章主要讲解小程序实现组件开发的多种方式

小程序框架_推荐多款高质量的小程序框架组件

小程序到底有多火,看看目前推出的开源框架以及组件库就知道了。由于小程序开发的火爆,大家都在致力于探索如何更好的,更加高效的开发小程序,以至于很多公司都贡献了小程序开源框架和组件库。 如: mpvue、Tina.js、Taro、wepy、weweb、touchwx

小程序支持JSX语法的新思路

React社区一直在探寻使用React语法开发小程序的方式,其中比较著名的项目有Taro,nanachi。而使用React语法开发小程序的难点主要就是在JSX语法上,JSX本质上是JS,相比于小程序静态模版来说太灵活。

微信小程序之异步处理

小程序中存在大量异步调用的接口,例如最常用的wx.login()、wx.getUserInfo()、wx.setStorage()、wx.getStorage()、wx.request(),虽然官方对部分接口也做出了同步版本,例如wx.setStorageSync、wx.getStorageSync(),但是在实际开发中始终要面对异步处理这个问题

微信小程序通过保存图片分享到朋友圈

小程序内是不能直接分享到朋友圈的。所以只能通过生成图片,携带小程序二维码,保存到手机相册,让用户自己选择发到朋友圈。然后可以通过在小程序中识别二维码来进入小程序的指定页面

使用CryptoJS在小程序中实现加解密

本文使用md5和rc4作为示例代码,可以根据实际项目选择不同的加密方式:在百度静态资源公共库中搜索crypto-js、用到CryptoJS的js放到同一个文件中,并在文件最下方暴露接口module.exports = CryptoJS

微信小程序更新机制_微信小程序的2种更新方式

小程序的启动方式:冷启动和热启动,小程序冷启动时,会检查小程序是否有最新版本。如果有则将异步下载最新版本,但是仍将运行当前版本等到下一次冷启动时再运行最新版本。

点击更多...

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