小程序map

资料详情。。。

地图组件使用起来也很简单。

.wxml

参数列表及说明如下：

除了显示基本地图，还可以在地图上添加markers–标注，polyline–折线，circles–圆形，controls–控件。

markers

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

效果如下：

polyline

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

circles

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

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是显示不出来的）

绑定事件

BUG

关于经纬度，官方文档上都写的是Number类型。但是通过IDE调试的时候，写成字符串也是可以的。但是在IOS真机上运行时，markers却显示不出来，也不报错。

后来自己对照属性的类型，发现后台传来的经纬度是字符串类型的。而字符串类型的经纬度在IOS真机上经测试就是显示不出来。

所以将字符串转成Number类型即可。