微信小程序-调用微信地图

问题：

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

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

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

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组件内容我就不一一说了，有兴趣可以去开发文档中去看下https://developers.weixin.qq.com/miniprogram/dev/component/map.html

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

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

链接进入官网自己按照步骤来

http://lbs.qq.com/qqmap_wx_jssdk/method-reverseGeocoder.html

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,
        })
      },
    })
  }
})

提示：

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

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

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

微信小程序-调用微信地图

猜你喜欢