微信小程序：轻松掌握地图定位技能

前言

微信小程序作为新型的轻应用被越来越多的用户所接受和使用。其中，地图定位功能已经成为了微信小程序的一项核心功能，方便用户快速准确地找到目标位置。本文将介绍如何利用微信小程序实现地图定位功能，为用户带来更加智能简便的使用体验。

---

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;//防止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;//防止this指向问题
        wx.chooseLocation({
            success: function (res) {
                console.log(res.name);
                //赋值给data中的mapName
                that.setData({
                    mapName: res.name
                })
            },
            //错误信息
            fail: function (err) {
                console.log(err);
            }
        })
    }
})

---

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

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

---

实现效果

---

总结：

• wxml 文件中定义一个方法触发点击事件；
• js 文件在 data 中声明首次加载的经度和维度，然后声明一个选点的位置用于在页面展示选中的地址；
• 触发 moveToLocation 事件，执行地图操作，通过 wx.chooseLocation 方法将拿到地址的值赋值给
  data 中定义的 mapName；
• 在 app.json 文件中定义授权信息。