前段时间有个群友问起小程序地图怎么点击直接进行导航!刚好我也在网上查找了下相关代码,整理了下,下面就是详细的说明!
首先在wxml文件中输入地图代码,相关内容自行查阅小程序开发教程
<map class="maps" id="map" longitude="112.8977300000" latitude="28.2174900000" scale="16" style="width:100%;height:500rpx;" bindtap="mapclick" markers="{{markers}}"></map>
longitude:经度
latitude:纬度
markers:标记(这个要动态的传递数值,所以这里就使用{{markers}})
下面就是markers的数值传递,在page的data中设置markers数组的值
Page({ data: { markers: [{ iconPath: "/images/location.png",//定位图标 id: 0, latitude: 28.2174900000,//纬度 longitude: 112.8977300000,//经度 width: 50,//图标宽 height: 50,//图标高 }], }, })
这样前端的地图组件就定位完成!
下一步操作就是怎么进行直接导航,这里使用微信自带的导航组件wx.openLocation(相关内容自行查阅小程序开发教程)
首先在地图上绑定一个事件,使用bindtap=”mapclick” 来绑定点击地图的操作事件mapclick,然后就是设置点击事件。
mapclick: function () { wx.openLocation({ latitude: 28.2174900000,//纬度 longitude: 112.8977300000,//经度 scale: 18,//缩放 name: '湖南翱云网络科技有限公司', address: '湖南长沙岳麓区桐梓坡西路雅阁国际' }) },
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。