组件

 <map
      id="map"
      longitude="120.131441"
      latitude="30.279383"
      scale="{{scale}}"
      controls="{{controls}}"
      onControlTap="controltap" markers="{{markers}}"
      onMarkerTap="markertap"
      polyline="{{polyline}}" circles="{{circles}}"
      onRegionChange="regionchange"
      onTap="tap"
      show-location  
      include-points="{{includePoints}}">
</map>

map的属性详解

属性名	类型	默认值	说明	最低版本
style	String		内联样式
class	String		样式名
longitude	Number		中心经度
latitude	Number		中心纬度
scale	Number	16	缩放级别，范围为5 ~ 18
markers	Array		标记点
polyline	Array		路线
circles	Array		圆
controls	Array		控件
polygon	Array		多边形
include-points	Array		缩放视野以包含所有给定的坐标点
show-location	Boolean		是否显示带有方向的当前定位点
onMarkerTap	EventHandle		点击标记点时触发，event = {latitude, longitude, markerId}。	返回值latitude, longitude1.10.0开始支持。
onCalloutTap	EventHandle		点击标记点对应的气泡时触发，event = {latitude,longitude, markerId}。	返回值latitude, longitude1.10.0开始支持。
onControlTap	EventHandle		点击控件时触发
onRegionChange	EventHandle		视野发生变化时触发，event = {type: “begin” / “end”, latitude，longitude， scale}。
onTap	EventHandle		点击地图时触发，event = {latitude, longitude}。	返回值latitude, longitude1.10.0开始支持。

1 markers

标记点，用于在地图上显示标记的位置。

属性名	说明	类型	必填	备注
id	标记点id	Number	否	标记点 id，点击事件回调会返回此 id
latitude	纬度	Float	是	范围 -90 ~ 90
longitude	经度	Float	是	范围 -180 ~ 180
title	标注点名	String	否
iconPath	显示的图标	String	是	项目目录下的图片路径，可以用相对路径写法，以’/‘开头则表示相对小程序根目录
rotate	旋转角度	Number	否	顺时针旋转的角度，范围 0 ~ 360，默认为 0
alpha	标注的透明度	Number	否	是否透明，默认为 1
width	标注图标宽度	Number	否	默认为图片的实际宽度
height	标注图标高度	Number	否	默认为图片的实际高度
callout	自定义标记点上方的气泡窗口	Object	否	{content}
anchorX	经纬度在标注图标的锚点-横向值	Double	否	这两个值需要成对出现，anchorX表示横向(0-1)，y表示竖向(0-1)， anchorX:0.5, anchorY:1 表示底边中点
anchorY	经纬度在标注图标的锚点-竖向值	Double	否
customCallout	callout背景自定义目前只支持高德地图style	Object	否	{content}
iconAppendStr	marker图片可以来源于View	String	否	和iconPath一起使用，会将iconPath对应的图片及该字符串共同生成一个图片，当成marker的图标
iconAppendStrColor	marker图片可以来源于View,底部描述文本颜色	String	否	默认是：#33B276
fixedPoint	基于屏幕位置扎点	Object	否	基于屏幕位置扎点
markerLevel	Number	覆盖物的 Z 轴坐标
anchorX	Number	牟点，需要成对出现，anchorX表示横向(0-1)，anchorY表示竖向(0-1)
anchorY	Number
iconAppendStr	String	和iconPath一起使用，会将iconPath对应的图片及该字符串共同生成一个图片，当成marker的图标
iconAppendStrColor	String	默认是：#33B276
~~customCallout~~	Object	自定义callout		这个属性跟上面的那个一毛一样不知道为什么要放两个可见这个文档写的是随心所欲

1.1 callout

自定义标记点上方的气泡窗口
效果如图所示

这里有个傻逼设定气泡必须点击后才会显示…..
而且是一个司马丑的样式具体样式怎么设置官方文档没有给出详细说明

属性名	说明	类型	必填	备注
content	内容	String	否	气泡显示的内容

1.2 customCallout

callout背景自定义目前只支持高德地图style

属性名	说明	类型	必填	备注
type	样式类型	Number	是	0为黑色style, 1为白色style, 2为背景+文本，见下表效果好像跟官方描述不大一致
time	时间	Number	是	时间值吐槽下这个瓜皮属性使用场景限制好大
~~desc~~	描述	String	是	描述这个哈皮属性亲测没用官方示例使用的是 descList属性官方文档给的这个属性也不知道什么意思真坑
descList	描述文字	Array	是	描述的数组可以不同文字定义不同颜色属性
isShow	是否显示	Boolean	否	是否显示默认为1 0隐藏 1 显示

1.2.1 type

样式类型可选择三个值

type	效果	说明
0		背景色为黑色
1		背景色为白色
2		背景色为白色会去除左边的时间显示

1.2.2 descList

代码示例

customcallout:{
  "type": 2,
    "time": 5,
    "descList": [
      {
        "desc": "红色",
        "descColor": "#ff0000"
      }, {
        "desc": "绿色",
        "descColor": "#00ff00"
      }, {
        "desc": "蓝色",
        "descColor": "#0000ff"
      }],
}

效果如下图所示

属性名	说明	类型	必填	备注
desc	描述文字	String	是	显示的文字内容
descColor	文字颜色	Color	否	六位十六进制颜色值

慌鷄

支付宝Map组件研究

组件

map的属性详解

1 markers

1.1 callout

1.2 customCallout

1.2.1 type

1.2.2 descList

1.3 iconAppendStr

2. polygon

3. polyline

4. circles

5.controls