PbootCMS小程序中腾讯地图及导航的使用方法

前段时间有个群友问起小程序地图怎么点击直接进行导航！刚好我也在网上查找了下相关代码，整理了下，下面就是详细的说明！
首先在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: 'xxx科技有限公司',
address: 'xxxx路'
})
},

 

本文标签：

声明：本文由代码号注册/游客用户【亭邬】供稿发布，本站不对用户发布的PbootCMS小程序中腾讯地图及导航的使用方法信息内容原创度和真实性等负责。如内容侵犯您的版权或其他权益，请留言并加以说明。站长审查之后若情况属实会及时为您删除。同时遵循 CC 4.0 BY-SA 版权协议，尊重和保护作者的劳动成果，转载请标明出处链接和本声明内容。本文作者：亭邬» /dmh/4487.html

很赞哦！ ()