# 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](https://lbs.amap.com/api/javascript-api/reference/overlay#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 方位为基准点进行偏移。 [相关示例](https://lbs.amap.com/api/javascript-api/example/marker/set-marker-text-label) | ## 事件 :::tip markder 组件的事件对象中可以获取 options 中的自定义属性数据，通过 event.target.dataOptions 获取。options 中如果有 icon 将会覆盖组件 props 中的 icon 属性。 ::: | 事件 | 参数 | 说明 | | ---------- | :----------------------------------------------------------------------------: | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | click | [MapsEvent](https://lbs.amap.com/api/javascript-api/reference/event#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](https://lbs.amap.com/api/javascript-api/reference/core/#LngLat)>}。
其中 passedPath 为 Marker 对象在 moveAlong 或者 moveTo 过程中已经走过的路径。 | | moveend | - | 点标记执行 moveTo 动画结束时触发事件，也可以由 moveAlong 方法触发 | | movealong | - | 点标记执行 moveAlong 动画一次后触发事件 | | touchstart | MapsEvent | 触摸开始时触发事件，仅适用移动设备 | | touchmove | MapsEvent | 触摸移动进行中时触发事件，仅适用移动设备 | | touchend | MapsEvent | 触摸结束时触发事件，仅适用移动设备 | ## 方法 :::tip 通过 `$refs` 获取组件实例来调用。例如：`this.$refs.myPolygon.getAll()`，关于 Marker 类的实例方法，请查看官方文档 [Marker](https://lbs.amap.com/api/javascript-api/reference/overlay#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] |