uni-app 地图全解析+事件监听
最近找到了一篇uni-app的地图解决方案精品文章,这里分享给大家,希望对大家有所帮助
转载地址:https://blog.csdn.net/cplvfx/article/details/111447466
1 2 3 | 前置条件:你需要阅读 https: //uniapp.dcloud.io/component/map |
先看图
事件监听-属性说明
1 2 3 | 这个表也是官方的 标红的是我用到的 |
使用
html
我这里用了“@markertap”点击标记点时触发事件, “@tap”点击地图时触发事件。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <template> <view class = "content" > <view class = "text-area" > <text class = "title" >{{title}}</text> </view> <view class = "page-body" > <view class = "page-section page-section-gap map" style= "width: 100%; height: 900rpx;" > <map style= "width: 100%; height: 100%;" scale= '15' :latitude= "latitude" :longitude= "longitude" :markers= "covers" @markertap= "markertap" @tap= "tap" @updated= "updated" > </map> </view> </view> </view> </template> |
js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 | <script> export default { data() { return { title: '百度地图' , latitude: 34.7586, longitude: 113.672307, covers: [] //标记点地图数据 } }, onLoad() { this .init(); }, methods: { init() { let that = this ; console.log( "init()" ) //发起网络请求获取数据 //用uni.request(OBJECT)方法 //我这里模拟下数据 var data = [{ id: 1, name: '雷军' , imgUrl: '../../static/user.png' , lat: "34.7586" , lng: "113.672307" },{ id: 2, name: '李彦宏' , imgUrl: '../../static/user.png' , lat: "34.763466" , lng: "113.686285" },{ id: 3, name: '马化腾' , imgUrl: '../../static/user.png' , lat: "34.763412" , lng: "113.680185" }, ]; that.MapData(that,data) }, //地图数据初始化 MapData(that, data) { console.log(data.length) console.log(data) let arrayData = []; for ( var i = 0; i < data.length; i++) { arrayData.push({ id: data[i].id, //marker点击事件回调会返回此id。建议为每个marker设置上Number类型id,保证更新marker时有更好的性能。 latitude: data[i].lat, //纬度 longitude: data[i].lng, //经度 title: data[i].name, //点击时显示,callout存在时将被忽略 iconPath:data[i].imgUrl, //项目目录下的图片路径,支持相对路径写法,以'/'开头则表示相对小程序根目录;也支持临时路径 width: 60, height: 60, callout: { //自定义标记点上方的气泡窗口 content: data[i].name, color: '' , //文本颜色 fontSize: 16, //文字大小 borderRadius: 20, //callout边框圆角 bgColor: '' , //背景色 padding: 6, //文本边缘留白 display: 'BYCLICK' , //'BYCLICK':点击显示; 'ALWAYS':常显 textAlign: 'left' , //文本对齐方式。有效值: left, right, center }, label: { //为标记点旁边增加标签 content: '' , //标记点旁边的文字 color: '#ff6600' , //文本颜色 fontSize: 16, //文字大小 x: 0, //label的坐标,原点是 marker 对应的经纬度 y: 0, //label的坐标,原点是 marker 对应的经纬度 borderWidth: 1, //边框宽度 borderColor: '' , //边框颜色 borderRadius: 10, //边框圆角 bgColor: 'red' , padding: 6, // 文本边缘留白 textAlign: 'left' , //文本对齐方式。有效值: left, right, center }, anchor: { //经纬度在标注图标的锚点,默认底边中点 {x, y},x表示横向(0-1),y表示竖向(0-1)。{x: .5, y: 1} 表示底边中点 x: .5, y: 1 } }); } console.log(arrayData.length) console.log(arrayData) //重新给地图数据赋值covers that.covers = arrayData; }, //地图点击事件 markertap(e) { console.log( "===你点击了标记点===" ) console.log( "你点击的标记点ID是:" + e.detail.markerId) //console.log(e) }, //点击地图时触发; App-nuve、微信小程序2.9支持返回经纬度 tap(e){ console.log( "===你点击了地图点===" ) console.log(e) }, //在地图渲染更新完成时触发 updated(e){ console.log( "===在地图渲染更新完成时触发===" ) console.log(e) } } } </script> |
说明:
其中标记点图片为什么是圆形的在你的项目跟目录找到App.vue,放入下面代码
1 2 3 4 5 6 7 | <style> /*每个页面公共css */ img.csssprite { border-radius: 50px !important; border: 1px #c7c7c7 solid !important; } </style> |
如果对您有所帮助,欢迎您点个关注,我会定时更新技术文档,大家一起讨论学习,一起进步。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· 百万级群聊的设计实践
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
· 永远不要相信用户的输入:从 SQL 注入攻防看输入验证的重要性
· 全网最简单!3分钟用满血DeepSeek R1开发一款AI智能客服,零代码轻松接入微信、公众号、小程
· .NET 10 首个预览版发布,跨平台开发与性能全面提升