微信小程序 - 接入腾讯地图定位

最新推荐文章于 2024-07-11 14:21:02 发布

weixin_34376986

最新推荐文章于 2024-07-11 14:21:02 发布

阅读量689

点赞数

原文链接：https://my.oschina.net/hp2017/blog/1795780

版权

为什么80%的码农都做不了架构师？>>>

问题：

微信小程序获取当前位置经纬度但是有时候你会发现定位并且不准确？

然后在调用内置地图发现你需要的位置定位有问题？

微信小程序可以打开内置地图，但是显示时候没有显示当前的位置名称？

wx.getLocation({
  type: 'gcj02', //返回可以用于wx.openLocation的经纬度
  success: function(res) {
    var latitude = res.latitude
    var longitude = res.longitude
    wx.openLocation({
      latitude: latitude,
      longitude: longitude,
      scale: 28
    })
  }
})

微信小程序api提供了定位当前位置API但是API中并没有提供定位之后显示位置名字，既然小程序API没有提供那么你可以使用第三方地图，腾讯地图，高德地图，百度地图.......

那我分享下我使用是腾讯地图吧，怕有什么问题毕竟还是用腾讯本家的好-_-#

需求：

假设在某个情景下需要页面加载展示出地图模块，并且直接定位到目标位置，点击地图组件可以使用地图导航，之后可以通过地图导航到目标地方。

思路：

1、你可以提供经纬度然后通过访问后台接口之后js数据渲染到wxml页面上，通过map组件来直接定位显示在你的页面中。

longitude--经度 latitude--维度 (这里写下，因为我就搞混过~~)

<!-- map.wxml -->
<map id="map" longitude="{{longitude}}" latitude="{{latitude}}" scale="14" controls="{{controls}}"  markers="{{markers}}" bindtap="goMap" polyline="{{polyline}}" bindregionchange="regionchange" show-location style="width: 100%; height: 300px;"></map>

至于map组件内容我就不详细说了，有兴趣可以去开发文档中去看下开发文档。

2、然后通过在js页面在页面加载时候请求后台，然后得到后台系统管理人员规定位置的经纬度，之后通过js数据渲染到界面map组件自动定位。

3、接着使用腾讯地图逆地址解析通过详细的经纬度获取详细地址信息。

链接进入腾讯地图官网自己按照步骤来：

const app = getApp()
var url = app.globalData.url
// 引入SDK核心类
var QQMapWX = require('xxx/qqmap-wx.js');

Page({
data:{
  longitude：'',
  latitude:'',
},


goMap:function(){
  var that = this
  //逆地址解析
 // 实例化API核心类
 var demo = new QQMapWX({
    key: '开发密钥（key）' // 必填
 });

 // 调用接口
 demo.reverseGeocoder({
    location: {
        latitude: that.data.latitude,
        longitude: that.data.longitude,
    },
    success: function(res) {
    console.log(res);
 //使用微信内置地图查看位置
 wx.openLocation({
      latitude: that.data.latitude,
      longitude: that.data.longitude,
      name:res.result.address,//地址描述
      scale: 28
    })
   },
   
 });

},

onLoad: function (res) {
  var that = this
  //发送请求
  wx.request({
      url: url + "xxx/xxx",//仅为示例接口地址
      success: function (res) {
        that.setData({
          longitude: res.data.longitude,
          latitude: res.data.latitude,
        })
      },
    })
  }
})

提示：

开发中遇到的坑，比如提供经纬度时候要注意要精确，不同平台的坐标不一样自己要注意，要不然定位会有问题。

水平有限，若有问题请留言交流。

互相学习，共同进步：）转载请注明出处谢谢。

转载于:https://my.oschina.net/hp2017/blog/1795780