欢迎来到素材无忧网,按 + 收藏我们
登录 注册 退出 找回密码

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

时间: 2024-02-25 10:04 阅读: 作者:素材无忧网

前段时间有个群友问起小程序地图怎么点击直接进行导航!刚好我也在网上查找了下相关代码,整理了下,下面就是详细的说明!
首先在wxml文件中输入地图代码,相关内容自行查阅小程序开发教程
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路'
})
},

版权声明: 本站资源均来自互联网或会员发布,如果侵犯了您的权益请与我们联系,我们将在24小时内删除!谢谢!

转载请注明: PbootCMS小程序中腾讯地图及导航的使用方法

标签: PbootCMS  
相关文章
推荐文章
模板推荐