小程序地图控件基本使用

.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