微信小程序map地图功能

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_38543537/article/details/84398573

首先写出三个按钮通过点击事件来触发

<button class='button-function' type='primary' bindtap='chaKan'>查看</button>
<button class='button-function' type='primary' bindtap='huoQu'>获取</button>
<button class='button-function' type='primary' bindtap='xuanZe'>选择</button>

按钮之间添加一些距离

.button-function{
  margin: 20rpx 20rpx 0 20rpx;
}

1、获取当前位置的方法

这是点击获取按钮获取到的信息，这个方法只会获取到经纬度信息，不会打开地图，

huoQu: function(e) {
    wx.getLocation({
      success: function (res) {
        console.log(res);
      },
    })
},

打印结果如下：

latitude: 31.38475,和longitude: 120.98181,是经纬度信息

2、查看当前位置的方法

这是点击查看按钮获取到的信息，这个方法会打开地图，并显示当前位置

chaKan: function (e) {
    wx.openLocation({
      latitude: 31.38475,
      longitude: 120.98181,
    })
},

上边方法里的经纬度就是刚才获取的经纬度

以下是点击查看按钮打开的地图：

3、点击选择按钮

点击选择按钮会自动打开地图并获取到当前位置，还带有搜索功能

xuanZe: function (e) {
    wx.chooseLocation({
      success: function (res) {
        console.log(res);
      }
    })
},

上边是点击选择按钮打开地图的方法

以下是打开的地图：

以下是选择位置后点击右上角确定按钮打印的信息：

获取到的参数赋值问题

赋值报错setData of null

解决办法：

将this赋值that，如下：