.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
style="width: 100%; height: 350px;">
</map>
| 参数名 | 参数类型 | 描述 |
|---|---|---|
| longitude | Number | 中心经度 |
| latitude | Number | 中心纬度 |
| scale | Number | 缩放级别，取值范围 5-18（默认16 number） |
| markers | Array | 标记点 |
| polyline | Array | 路线 |
| circle | Array | 圆 |
| controls | Array | 控件 |
| include-points | Array | 缩放视野以及所有给定的坐标点 |
| circle | Boolean | 圆 |
| show-location | EventHandle | 显示带有方向的当前定位点 |
| bindmarkertap | EventHandle | 点击标记点时触发 |
| bindcontroltap | EventHandle | 点击控件时触发 |
| bindregionchange | EventHandle | 视野发生变化时触发 |
| bindtap | EventHandle | 点击地图时触发 |
除了显示基本地图，还可以在地图上添加markers–标注，polyline–折线，circles–圆形，controls–控件。
markers
data: {
markers: [{
iconPath: "../../img/marker_red.png",
id: 0,
latitude: 40.002607,
longitude: 116.487847,
callout:{
content:'气泡名称',
color: '#FF0000',
fontSize: 15,
borderRadius: 10,
display: 'ALWAYS',
},
width: 35,
height: 45
}],
... //省略代码
}
| 参数名 | 参数类型 | 必传 | 描述 |
|---|---|---|---|
| id | Number | N | 标记点id（marker事件回调会返回此id） |
| longitude | Number | Y | 中心经度（浮点数，范围：-180~180） |
| latitude | Number | Y | 中心纬度（浮点数，范围：-90~90） |
| title | String | N | 标注点名 |
| iconPath | String | Y | 显示的图标（项目目录下的图片路径，支持相对路径写法，以‘/’开头，则表示相对小程序的根目录，也支持临时路径） |
| rotate | Number | N | 旋转角度（顺时针旋转的角度，范围：0~360，默认0） |
| alpha | Number | N | 标注的透明度（默认1，无透明） |
| width | Number | N | 标注图标宽度（默认图标实际宽度） |
| height | Number | N | 标注图标高度（默认图标实际高度） |
| callout | Object | N | 自定义标注点上方的气泡窗口 ({content，color，fontSize，borderRadius，bgColor，padding，boxShadow，display}) |
| label | Object | N | 为标记点旁边增加标签（{color，font Size，content，x，y}，可识别换行符，x，y原点是marker对应的经纬度） |
polyline
指定一系列坐标点，从数组第一项连线至最后一项
| 参数名 | 参数类型 | 必传 | 描述 |
|---|---|---|---|
| points | Array | Y | 经纬度数组（[{latitude：0，longitude:0}]） |
| color | String | N | 线的颜色（8位16进制表示，后两位表示alpha值，如：#000000AA） |
| width | Number | N | 线的宽度 |
| dotted'Line | Boolean | N | 是否是虚线（默认false） |
// .wxml
<map id="myMap" style='width:100%;height:50%' longitude="{{longitude}}" latitude="{{latitude}}" polyline='{{polyline}}'/>
// .js
Page({
data: {
polyline:[{
points:[{
latitude:'40.006822',
longitude:'116.481451'
}, {
longitude: '116.487847',
latitude: '40.002607'
}, {
longitude: '116.496507',
latitude: '40.006103'
}, {
latitude:'40.002607',
longitude: '116.587847',
}],
width:2,
color:'#000000AA',
dottedLine:false
}]
}
})
circles
在地图上显示圆
| 参数名 | 参数类型 | 必传 | 描述 |
|---|---|---|---|
| longitude | Number | Y | 中心经度（浮点数，范围：-180~180） |
| latitude | Number | Y | 中心纬度（浮点数，范围：-90~90） |
| color | String | N | 描边颜色（8位16进制表示，后两位表示alpha值，如：#000000AA） |
| fill'Color | String | N | 填充颜色（8位16进制表示，后两位表示alpha值，如：#000000AA） |
| strokeWidth | Number | N | 描边宽度 |
| radius | Number | Y | 半径 |
// .wxml
<map id="myMap" style='width:100%;height:50%' longitude="{{longitude}}" latitude="{{latitude}}" circles='{{circles}}'/>
// .js
Page({
data: {
circles:[{
latitude:40.002607,
longitude: 116.587847,
color: '#ee7788aa',
radius: 50,
fillColor:'#7cb5ec88',
strokeWidth:1
}]
}
})
controls
在地图上显示控件，控件不随地图移动
| 参数名 | 参数类型 | 必传 | 描述 |
|---|---|---|---|
| id | Number | N | 控件id（在控件点击事件回调返回此id） |
| position | Object | Y | 控件在地图的位置（控件相对地图位置） |
| icon'Path | String | Y | 显示的图标（项目路径下的路径，支持相对路径写法，以‘/’开头表示相对小程序的根目录） |
| clickable | Boolean | N | 是否可点击（默认不可点击） |
position
| 参数名 | 参数类型 | 必传 | 描述 |
|---|---|---|---|
| left | Number | N | 距离地图左边界的距离（默认为0） |
| top | Number | N | 距离地图上边界的距离（默认为0） |
| width | Number | N | 控件宽度（默认图片宽度） |
| height | Number | N | 控件高度（默认图片高度） |
// .wxml
<map id="myMap" style='width:100%;height:400px' longitude="{{longitude}}" latitude="{{latitude}}" controls='{{controls}}' bindcontroltap='controltap'/>
// .js
Page({
data: {
controls: [{
id: 1,
iconPath: '../../img/marker_yellow.png',
position: {
left: 10,
top: 360,
width: 35,
height: 35
},
clickable: true
}]
}
}),
controltap: function (e) {
console.log(e.controlId); # 控件id 1
}
#可以通过在map上添加一个按钮，来实现诸如：定位、状态返回等操作。
#（直接通过布局文件在map上添加view是显示不出来的）
绑定事件
| 参数名 | 参数类型 | 描述 |
|---|---|---|
| bindmarkertap | EventHandel | 点击标记点时触发 |
| bindcontroltap | EventHandel | 点击控件时触发 |
| bindregionchange | EventHandel | 视野发生变化时触发 |
| bindtap | EventHandel | 点击地图时触发 |
BUG
关于经纬度，官方文档上都写的是Number类型。但是通过IDE调试的时候，写成字符串也是可以的。但是在IOS真机上运行时，markers却显示不出来，也不报错。
后来自己对照属性的类型，发现后台传来的经纬度是字符串类型的。而字符串类型的经纬度在IOS真机上经测试就是显示不出来。
所以将字符串转成Number类型即可。
附原始手册地址：http://blog.csdn.net/crazy1235/article/details/55004841
