地图组件使用起来也很简单。
.wxml
参数列表及说明如下:
除了显示基本地图,还可以在地图上添加markers–标注,polyline–折线,circles–圆形,controls–控件。
data: { // markers: [{ iconPath:"../../img/marker_red.png", id:0, latitude:40.002607, longitude:116.487847, width:35, height:45}],...//省略代码 }
1
2
3
4
5
6
7
8
9
10
11
12
在data中定义markers变量来表示覆盖物
然后map控件引入即可:
1
2
效果如下:
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 }],...//省略代码 }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
1
data: { // circles: [{ latitude:'40.007153', longitude:'116.491081', color:'#FF0000DD', fillColor:'#7cb5ec88', radius:400, strokeWidth:2}],...//省略代码 }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
1
效果如下:
controls: [{ id:1, iconPath:'../../img/marker_yellow.png', position: { left:0, top:300-50, width:50, height:50}, clickable:true}]
1
2
3
4
5
6
7
8
9
10
11
1
control点击事件如下:
controltap:function(e){console.log(e.controlId); },
1
2
3
其实可以通过在map上添加一个按钮,来实现诸如:定位、状态返回等操作。
(直接通过布局文件在map上添加view是显示不出来的)
关于经纬度,官方文档上都写的是Number类型。但是通过IDE调试的时候,写成字符串也是可以的。但是在IOS真机上运行时,markers却显示不出来,也不报错。
后来自己对照属性的类型,发现后台传来的经纬度是字符串类型的。而字符串类型的经纬度在IOS真机上经测试就是显示不出来。
所以将字符串转成Number类型即可。