前言
地图定位这个功能大家都很熟悉吧，那大家知道微信小程序中要怎么实现地图定位呢，其实非常简单，看完本篇文章，你也可以轻松实现这个小功能。
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 () {
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://www.bmabk.com/index.php/post/79413.html
