前端实用案例前端理论

小程序中通过经纬度如何获取所在省市区名字(腾讯地图JavaScr

2020-06-24  本文已影响0人  一只大橘

在小程序中通过经纬度来获取所在省市区名字,这个功能还是挺有意思的,小程序中竟然不直接返回所在省市区,只提供经纬度,还需要腾讯地图来获取,还是有点小坑的,不注意的话很容易出问题。废话不多说,请看下文。

wx.getLocation() 获取经纬度

1.使用腾讯地图,申请开发者账号,申请key,绑定使用小程序,常规操作,没啥大问题。
提供腾讯地图申请链接:(https://lbs.qq.com/miniProgram/jsSdk/jsSdkGuide/jsSdkOverview

2.注意:安全域名设置,在“设置” -> “开发设置”中设置request合法域名,添加https://apis.map.qq.com

image.png

准备工作做完
开始引入map地图js库,请看实例,此案例为小程序中。

 const qqMap = require('../../utils/qqmap-wx-jssdk.min.js')
Page({
 onLoad: function (options) {
  wx.getLocation({
      type: 'wgs84',
      altitude: false,
      success: (result) => {
            that.getOnlineDistrict(result.latitude, result.longitude)
          },
     });
  },

//这里调用腾讯地图api 获取用户位置所在区
getOnlineDistrict(latitude, longitude) {
    var that = this;
    var map = new qqmap({
      key: 'PLUBZ-U3CRX-25I4F-ZW5YC-HSCWO-KKBQ2'
    })
    //通过这个方法来实现经纬度反推省市区
    map.reverseGeocoder({
      location: {
        latitude: latitude,
        longitude: longitude
      },
      success: function (res) {
        console.log(res)
     }
    })
  }
)}

输出结果:


image.png

总结:在小程序中有特定的地图库qqmap-wx-jssdk.min.js,通过这个js库可以实现很多的功能,比如街道,酒店,KTV等等,总结下希望能帮助到大家。

上一篇 下一篇

猜你喜欢

热点阅读