微信小程序地图功能怎么开发?
微信小程序地图功能怎么开发?在开发微信小程序的过程中是无法避免开发微信小程序地图功能的,尤其是微信小程序商店,必须要开发微信小程序地图功能,微信小程序地图功能怎么开发?
在接下来内容小编主要介绍微信小程序中的地图模块相关功能。
微信小程序地图功能基本使用:
地图组件使用起来也很简单。参数列表及说明如下:
除了显示基本地图,还可以在地图上添加markers–标注,polyline–折线,circles–圆形,controls–控件。
markers
data: {
//
markers: [{
iconPath: "../../img/marker_red.png",
id: 0,
latitude: 40.002607,
longitude: 116.487847,
width: 35,
height: 45
}],
... //省略小程序代码
}123456789101112
在data中定义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
}],
//省略代码
}
123456789101112131415161718192021
1
circles
data: {
circles: [{
latitude: '40.007153',
longitude: '116.491081',
color: '#FF0000DD',
fillColor: '#7cb5ec88',
radius: 400,
strokeWidth: 2
}],
... //省略代码
}
controls: [{
id: 1,
iconPath: '../../img/marker_yellow.png',
position: {
left: 0,
top: 300 - 50,
width: 50,
height: 50
},
clickable: true
}]1234567891011
1
control点击事件如下:
controltap: function (e) {
console.log(e.controlId);
},
其实可以通过在map上添加一个小程序按钮,来实现诸如:定位、状态返回等操作。
(直接通过布局文件在map上添加view是显示不出来的)
绑定事件
关于经纬度,官方文档上都写的是Number类型。但是通过IDE调试的时候,写成字符串也是可以的。但是在IOS真机上运行时,markers却显示不出来,也不报错。
后来自己对照属*的类型,发现后台传来的经纬度是字符串类型的。而字符串类型的经纬度在IOS真机上经测试就是显示不出来。
所以将字符串转成Number类型即可。
微信小程序地图功能怎么开发?以上就是微信小程序地图功能开发的全部内容了,各位微信小程序开发者,相信以上小编整理的内容对您开发微信小程序一定会有帮助的,大家请多关注微小乔。
相关推荐:
微信小程序卫星地图开发实例
微信小程序地图导航,景区地图导航应用微信小程序
微信小程序导航地图开发实例