前端随心记---------小程序地图map组件应用
简单实现小程序地图
官方文档:https://developers.weixin.qq.com/miniprogram/dev/component/map.html
map.wxml:
<view> <map id="map" longitude="{{获取的坐标}}" latitude="{{获取的坐标}}" scale="14" show-location style="width: 100%; height: 300px;"> </map> </view>
map.js:
Page({ data: { markers: [{ iconPath: "/resources/others.png", id: 0, latitude: 23.099994, longitude: 113.324520, width: 50, height: 50 }], polyline: [{ points: [{ longitude: 113.3245211, latitude: 23.10229 }, { longitude: 113.324520, latitude: 23.21229 }], color:"#FF0000DD", width: 2, dottedLine: true }], controls: [{ id: 1, iconPath: '/resources/location.png', position: { left: 0, top: 300 - 50, width: 50, height: 50 }, clickable: true }] }, regionchange(e) { console.log(e.type) }, markertap(e) { console.log(e.markerId) }, controltap(e) { console.log(e.controlId) } })
由于map应用需要获取个人信息,需要设置信息
“permission”:{
“scope.userLocation”:{
“desc”:“你的位置将用于小程序地图展示” //描述信息
}
}
在页面加载时,调用获取地理位置API
wx.getLocation({ type: 'wgs84', success (res) { const latitude = res.latitude const longitude = res.longitude const speed = res.speed const accuracy = res.accuracy } })
关于分辨率rpx
集思广益,仅供学习,侵权即删!!
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 深入理解 Mybatis 分库分表执行原理
· 如何打造一个高并发系统?
· .NET Core GC压缩(compact_phase)底层原理浅谈
· 现代计算机视觉入门之:什么是图片特征编码
· .NET 9 new features-C#13新的锁类型和语义
· Spring AI + Ollama 实现 deepseek-r1 的API服务和调用
· 《HelloGitHub》第 106 期
· 数据库服务器 SQL Server 版本升级公告
· 深入理解Mybatis分库分表执行原理
· 使用 Dify + LLM 构建精确任务处理应用