小程序教程之腾讯地图及导航的使用
作者: 美橙网 . 阅读量:1741 . 发表时间:2020-08-27 15:59:04
首先在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: '苏州相城区中翔大厦15012' }) },
来源: www.mczx.com.cn/jsrz/129.html
关键词Tags: