# fast-marker 点标记组件
# 示例
# 简单示例
TIP
FastMarker 组件的简单使用示例，请将自定义数据放在 options 参数中。
# 综合示例
TIP
使用 FastMarker 组件提供的一些方法可以应对一些特殊需求，使用这些方法不会导致 Vue 重新渲染，请注意通过方法获取的 marker 实例，不要被 Vue 绑定否则会有性能影响。
# Icon 示例
TIP
图标类，用于作为 Marker 的 icon 属性，如果 marker 组件的 icon 属性是一个对象，将会创建 Icon 实例。
# 属性
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| mid | number / string | - | 地图实例的唯一 marker 组件通过 mid 获取对应的地图实例，然后将覆盖物渲染在对应的地图实例中。 |
| options | Array | - | 这里是对 marker 的扩展，该数组中存放 marker options 属性中，当前对象的属性会覆盖通过 prop 传递的属性。如果需要自定义不同的 icon，建议将 icon 与 offset 数组与自定义数据放在该数组中。 |
| position | Array | - | 点标记在地图上显示的位置，默认为地图中心点 |
| anchor | string | top-left | 设置点标记锚点。 默认值：'top-left' 可选值：'top-left', 'top-center', 'top-right', 'middle-left', 'center', 'middle-right', 'bottom-left', 'bottom-center', 'bottom-right' |
| offset | Array | - | marker 组件会获取 offset 属性去创建 Pixel。例如：[-10,-34] 会执行 new Pixel(-10,-34) 点标记显示位置偏移量，默认值为 Pixel(-10,-34)。Marker 指定 position 后，默认以 marker 左上角位为基准点（若设置了 anchor，则以 anchor 设置位置为基准点），对准所给定的 position 位置，若需使 marker 指定位置对准在 position 处，需根据 marker 的尺寸设置一定的偏移量。 |
| icon | string / icon | - | 需在点标记中显示的图标。可以是一个本地图标地址，或者 Icon 对象。有合法的 content 内容时，此属性无效 |
| content | string / Object | - | 点标记显示内容，可以是 HTML 要素字符串或者 HTML DOM 对象。content 有效时，icon 属性将被覆盖 |
| topWhenClick | boolean | false | 鼠标点击时 marker 是否置顶，默认 false ，不置顶 |
| bubble | boolean | false | 是否将覆盖物的鼠标或 touch 等事件冒泡到地图上，默认值：false |
| draggable | boolean | false | 设置点标记是否可拖拽移动，默认为 false |
| raiseOnDrag | boolean | false | 设置拖拽点标记时是否开启点标记离开地图的效果 |
| cursor | string | - | 指定鼠标悬停时的鼠标样式，自定义 cursor，IE 仅支持 cur/ani/ico 格式，Opera 不支持自定义 cursor |
| visible | boolean | true | 点标记是否可见，默认为 true |
| zIndex | number | 100 | 点标记的叠加顺序。地图上存在多个点标记叠加时，通过该属性使级别较高的点标记在上层显示。默认 zIndex：100 |
| angle | number | - | 点标记的旋转角度，广泛用于改变车辆行驶方向 注：angle 属性是使用 CSS3 来实现的，支持 IE9 及以上版本 |
| autoRotation | boolean | false | 是否自动旋转。点标记在使用 moveAlong 动画时，路径方向若有变化，点标记是否自动调整角度，默认为 false。广泛用于自动调节车辆行驶方向。IE8 以下不支持旋转，autoRotation 属性无效 |
| animation | string | AMAP_ANIMATION_NONE | 点标记的动画效果， 默认值：“AMAP_ANIMATION_NONE” 可选值： “AMAP_ANIMATION_NONE”，无动画效果 “AMAP_ANIMATION_DROP”，点标掉落效果 “AMAP_ANIMATION_BOUNCE”，点标弹跳效果 |
| shadow | icon | - | 点标记阴影，不设置该属性则点标记无阴影 |
| title | string | - | 鼠标滑过点标记时的文字提示，不设置则鼠标滑过点标无文字提示 |
| clickable | boolean | false | 点标记是否可点击 |
| shape | MarkerShape | - | 设置 Marker 的可点击区域，在定义的区域内可触发 Marker 的鼠标点击事件 |
| extData | Any | - | 用户自定义属性，支持 JavaScript API 任意数据类型，如 Marker 的 id 等 |
| label | {content,offset,direction} | - | 添加文本标注。content 为文本标注的内容。direction 为文本标注方位（自 v1.4.14 新增属性），可选值：'top'，'right'，'bottom'，'left'，'center'，默认值：'top' 。offset 为偏移量（默认基准点为图标左上角），如设置了 direction，以 direction 方位为基准点进行偏移。 相关示例 |
# 事件
TIP
markder 组件的事件对象中可以获取 options 中的自定义属性数据，通过 event.target.dataOptions 获取。options 中如果有 icon 将会覆盖组件 props 中的 icon 属性。
| 事件 | 参数 | 说明 |
|---|---|---|
| click | MapsEvent | 鼠标左键单击事件 |
| dblclick | MapsEvent | 鼠标左键双击事件 |
| rightclick | MapsEvent | 鼠标右键单击事件 |
| mousemove | MapsEvent | 鼠标移动 |
| mouseover | MapsEvent | 鼠标移近点标记时触发事件 |
| mouseout | MapsEvent | 鼠标移出点标记时触发事件 |
| mousedown | MapsEvent | 鼠标在点标记上按下时触发事件 |
| mouseup | MapsEvent | 鼠标在点标记上按下后抬起时触发事件 |
| dragstart | MapsEvent | 开始拖拽点标记时触发事件 |
| dragging | MapsEvent | 鼠标拖拽移动点标记时触发事件 |
| dragend | MapsEvent | 点标记拖拽移动结束触发事件 |
| moving | Object | 点标记在执行 moveTo，moveAlong 动画时触发事件，Object 对象的格式是{passedPath:Array.<LngLat>}。 其中 passedPath 为 Marker 对象在 moveAlong 或者 moveTo 过程中已经走过的路径。 |
| moveend | - | 点标记执行 moveTo 动画结束时触发事件，也可以由 moveAlong 方法触发 |
| movealong | - | 点标记执行 moveAlong 动画一次后触发事件 |
| touchstart | MapsEvent | 触摸开始时触发事件，仅适用移动设备 |
| touchmove | MapsEvent | 触摸移动进行中时触发事件，仅适用移动设备 |
| touchend | MapsEvent | 触摸结束时触发事件，仅适用移动设备 |
# 方法
TIP
通过 $refs 获取组件实例来调用。例如：this.$refs.myPolygon.getAll()，关于 Marker 类的实例方法，请查看官方文档 Marker
| 方法 | 参数 | 返回值 | 说明 |
|---|---|---|---|
| getAMapPromise | - | Promise | 获取 AMap 类，返回一个 Promise 对象，在 reslove 中返回 AMap 类 |
| getAMapInstance | - | AMap | 获取 AMap 类，请在地图组件 complete 之后获取，否则返回值可能是 Null |
| getMapInstance | - 或 mid | map | 根据 mid 获取当前地图实例，默认会根据组件传入的 mid 属性获取 |
| hideAll | - | - | 隐藏当前组件所有的 marker 实例 |
| showAll | - | - | 显示当前组件所有的 marker 实例 |
| clearAll | - | - | 清空当前组件所有的 marker 实例 |
| removeMarkers | markers, propName | - | 删除传入的 markers 实例数组，该方法不会导致 vue 重新渲染，propName 是每个 marker 实例 options 中的唯一值，例如 id, key 它用来做查询优化，请保证每个实例 options 中的 propName 值都是唯一的，如果传入该参数将会大大优化性能。 |
| getAll | - | Array | 获取当前组件所有的 marker 实例 |
| getInstanceByProp | propName, propValue | - | 根据传入的属性名称与值查找对应的 marker 实例 |
| getAllInstanceByProp | propName, propValue | - | 根据传入的属性名称与值查找所有对应的 marker 实例 |
| getInstanceByProps | propName, propValues | - | 根据传入的属性名称与值的数组查找对应的 marker 实例数组，该方法对遍历做了优化，建议使用该方法获取 marker 数组 |
| addMarkers | options, isItemIcon, isItemOffset, beforeCreate | - | options 是一个 marker 属性的数组，没有的属性会通过组件传递的属性获取。 isItemIcon 默认是 false, 当 isItemIcon 为 true 将会为 options 数组中每个对象的 icon 属性创建 Icon 实例，默认 fals 共用组件传入的 icon 属性所创建的 Icon 实例。 isItemOffset 默认是 false, 当 isItemOffset 为 true 将会为 options 数组中每个对象的 offset 属性创建 Pixel 实例，默认 fals 共用组件传入的 offset 属性所创建的 Pixel 实例。 beforeCreate 是一个可选的回调函数，默认可以不传递，可在创建 marker 之前调用，将 marker 属性传入其中，可以通过该方法处理自定义渲染。新增的 marker 数组会添加在组件中，此时 getAll 方法获取的数组中包含新增 marker，该方法不会导致 vue 重新渲染 |
# Icon 属性
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| size | Array | - | 图标尺寸，默认值 [36, 36] |
| imageOffset | Array | - | 图标取图偏移量。当image中指定了一个大图时，可通过size和imageOffset配合，显示图标的指定范围。例如：[-13, -30] |
| image | string | - | 图标的取图地址。默认为蓝色图钉图片 |
| imageSize | Array | - | 图标所用图片大小，根据所设置的大小拉伸或压缩图片，等同于CSS中的background-size属性。可用于实现高清屏的高清效果。例如：[36, 36] |