微信小程序地图定位的实现方法实例
作者:水星记_ 时间:2023-08-25 10:13:10
前言
地图定位这个功能大家都很熟悉吧,那微信小程序中要怎么实现地图定位呢,其实非常简单,没有大家想象中那么难,看完本篇文章,你也可以轻松实现这个小功能哦。
方法如下
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
标签:微信小程序,地图,定位
0
投稿
猜你喜欢
opencv实现简单人脸识别
2021-08-26 07:49:06
SQL语句删除2条重复数据一条保留一条
2024-01-26 12:16:39
网站注册那些事儿
2010-01-05 16:49:00
Asp 操作Cookies(包括设置[赋值]、读取、删除[设置过期时间])
2011-03-10 11:06:00
ActionScript3.0是革命性的
2008-05-01 12:36:00
vue踩坑日记之params传递参数问题
2024-05-10 14:19:48
mysql删除操作其实是假删除问题
2024-01-27 23:15:50
Golang如何编写内存高效及CPU调优的Go结构体
2024-04-23 09:45:55
如何区分MySQL的innodb_flush_log_at_trx_commit和sync_binlog
2024-01-19 19:38:30
何在MySQL数据库中定义外键
2009-12-17 12:29:00
MySql分组后随机获取每组一条数据的操作
2024-01-26 21:12:11
基于Tensorflow使用CPU而不用GPU问题的解决
2022-01-01 22:53:08
oracle怎样修改表名、列名、字段类型、添加表列、删除表列
2010-07-23 11:10:00
JavaScript setTimeout和setInterval的使用方法 说明
2023-08-31 10:48:19
vue实现百度搜索功能
2024-05-05 09:11:34
django将网络中的图片,保存成model中的ImageField的实例
2023-12-23 01:11:33
python GUI库图形界面开发之PyQt5动态加载QSS样式文件
2022-09-16 19:50:02
asp如何从数据库中删除废旧的电子信箱地址?
2009-11-15 20:04:00
用Python实现换行符转换的脚本的教程
2021-12-10 23:25:42
PyTorch 随机数生成占用 CPU 过高的解决方法
2021-09-23 09:12:31