这篇文章主要讲解了“微信小程序开发如何实现地图功能”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“微信小程序开发如何实现地图功能”吧!
地图组件使用起来也很简单。
.wxml
<map id="map" longitude="{{longitude}}" latitude="{{latitude}}" scale="14" controls="{{controls}}" bindcontroltap="controltap" markers="{{markers}}" bindmarkertap="markertap" polyline="{{polyline}}" circles="{{circles}}" bindregionchange="regionchange" show-location >
</map>
除了显示基本地图,还可以在地图上添加markers–标注,polyline–折线,circles–圆形,controls–控件。
data: {
//
markers: [{
iconPath: "../../img/marker_red.png",
id: 0,
latitude: 40.002607,
longitude: 116.487847,
width: 35,
height: 45
}],
... //省略代码
}
在data中定义markers变量来表示覆盖物
然后map控件引入即可:
<map id="map" longitude="{{longitude}}" markers="{{markers}}" ...//省略代码>
</map>
data: {
//
polyline: [{
points: [{
longitude: '116.481451',
latitude: '40.006822'
}, {
longitude: '116.487847',
latitude: '40.002607'
}, {
longitude: '116.496507',
latitude: '40.006103'
}],
color: "#FF0000DD",
width: 3,
dottedLine: true
}],
... //省略代码
}
<map id="map" longitude="{{longitude}}" latitude="{{latitude}}" polyline="{{polyline}}" >
data: {
//
circles: [{
latitude: '40.007153',
longitude: '116.491081',
color: '#FF0000DD',
fillColor: '#7cb5ec88',
radius: 400,
strokeWidth: 2
}],
... //省略代码
}
感谢各位的阅读,以上就是“微信小程序开发如何实现地图功能”的内容了,经过本文的学习后,相信大家对微信小程序开发如何实现地图功能这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是亿速云,小编将为大家推送更多相关知识点的文章,欢迎关注!
亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。