微信小程序地图定位的实现方法实例
更新时间：2022年04月21日 11:30:39 作者：水星记_
小程序功能的强大想必使用过的人都知道,下面这篇文章主要给大家介绍了关于微信小程序地图定位的实现方法,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
前言
地图定位这个功能大家都很熟悉吧，那微信小程序中要怎么实现地图定位呢，其实非常简单，没有大家想象中那么难，看完本篇文章，你也可以轻松实现这个小功能哦。
方法如下
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文件中定义授权信息。
到此这篇关于微信小程序地图定位实现的文章就介绍到这了,更多相关微信小程序地图定位内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了浅谈js二维码扫码登录是什么原理，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-04-04
这篇文章主要为大家详细介绍了JavaScript缓动动画函数的封装方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-11-11
这篇文章主要为大家详细介绍了微信小程序scroll-view实现自定义滚动条，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-06-06
这篇文章主要介绍了JavaScript中的值是按值传递还是按引用传递问题探讨,本文讲解了按值传递、按引用传递、按共享传递、基本类型的不可变(immutable)性质等内容,需要的朋友可以参考下2015-01-01
Flexigrid在IE下不显示数据的情况，想必大家都有遇到过吧，下面有个不错的解决方法，感兴趣的朋友可以参考下2013-10-10
这篇文章主要介绍了ES6知识点整理之模块化的应用,结合实例形式分析了基于node.js环境下模拟ES6模块化配置与使用相关操作技巧,需要的朋友可以参考下2019-04-04
要检测某一变量是否存在，虽然简单但是也要细心，下面整理了几点，遇到类似问题的朋友可以参考下2013-11-11
微信小程序MUI侧滑导航菜单示例(Popup弹出式,左侧不动，右侧滑动)
这篇文章主要介绍了微信小程序MUI侧滑导航菜单,结合实例形式分析了微信小程序Popup弹出式,左侧不动，右侧滑动菜单相关实现技巧与注意事项,需要的朋友可以参考下2019-01-01
我们在学到js中数组的时候,我们会接触到js中数组的一些方法这些方法对我们来说,可以很便利的达到我们想要的结果,下面这篇文章主要给大家介绍了关于javascript中搜索数组的四种方法,需要的朋友可以参考下2022-12-12
这篇文章主要给大家介绍了关于js使用文件流下载csv文件的实现方法，文中通过示例代码介绍的非常详细，对大家学习或者使用js具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2019-07-07
最新评论