微信小程序地图定位的实现方法实例

前言

地图定位这个功能大家都很熟悉吧，那微信小程序中要怎么实现地图定位呢，其实非常简单，没有大家想象中那么难，看完本篇文章，你也可以轻松实现这个小功能哦。

方法如下

1.首先呢你要有一个方法去触发这个点击事件，下面已经写好啦，非常简单的两行代码。

<input placeholder="请选择地址..." value="{{mapName}}"></input>
<button bindtap="moveToLocation">地图选点</button>

2.接下来就到js了，我们要在data中声明首次加载的经度和维度，然后在声明一个选点的位置。

data: {
       latitude: 0, //首次加载维度
       longitude: 0, //首次加载的经度
       mapName: "", //选点的位置
   },

3.下面就是在moveToLocation事件中执行地图操作啦，主要是通过wx.chooseLocation方法，然后将拿到的值赋值给上面data中定义的mapName即可。

moveToLocation() {
       let that = this
       wx.chooseLocation({
           success: function (res) {
               console.log(res.name);
               //赋值给data中的mapName
               that.setData({
                   mapName: res.name
               })
           },
           //错误信息
           fail: function () {
               console.log(err);
           }
       })
   }

js完整代码

Page({
   data: {
       latitude: 0, //首次加载维度
       longitude: 0, //首次加载的经度
       mapName: "", //选点的位置
   },
   moveToLocation() {
       let that = this
       wx.chooseLocation({
           success: function (res) {
               console.log(res.name);
               //赋值给data中的mapName
               that.setData({
                   mapName: res.name
               })
           },
           //错误信息
           fail: function () {
               console.log(err);
           }
       })
   }
})

4.最后的最后我们需要在app.json文件中添加这么一段：

"permission": {
   "scope.userLocation": {
     "desc": "你的位置信息将用于小程序位置接口的效果展示"
   }
 },

5.展示

总结：

1.wxml文件中定义一个方法触发点击事件；

2.js文件在data中声明首次加载的经度和维度，然后声明一个选点的位置用于在页面展示选中的地址；

3.触发moveToLocation事件方法，执行地图操作，通过wx.chooseLocation方法，将拿到地址的值赋值给data中定义的mapName；

4.在app.json文件中定义授权信息。

来源：https://blog.csdn.net/Shids_/article/details/122133079