使用 @vuemap/vue-amap 高德 Vue 组件库点标记技巧

高德地图标记精通指南：从初学者到大师

一、单点标记

点亮地图的第一步，从单点标记开始。就像在虚拟画布上落下一笔，使用 amap-marker 组件，指定它的位置、图标、标题和内容，即可让标记跃然眼前。

<amap-marker :position="center" icon="path/to/icon.png" title="标记标题" content="标记内容"></amap-marker>

二、多点标记

当多个点需要同时标示时，amap-markers 组件闪亮登场。通过提供一个标记数组，每个标记包含位置、图标、标题和内容，轻松实现多点标记。

<amap-markers :markers="[
  {position: center1, icon: 'path/to/icon1.png', title: '标记标题1', content: '标记内容1'},
  {position: center2, icon: 'path/to/icon2.png', title: '标记标题2', content: '标记内容2'},
  // ...
]"></amap-markers>

三、标记聚合

当标记数量庞大，地图会瞬间拥挤不堪。此时，标记聚合功能派上用场。通过 clusterer 属性，将相邻标记聚合在一起，以聚合标记的形式呈现。

<amap-markers :markers="[
  {position: center1, icon: 'path/to/icon1.png', title: '标记标题1', content: '标记内容1'},
  {position: center2, icon: 'path/to/icon2.png', title: '标记标题2', content: '标记内容2'},
  // ...
]" :clusterer="true"></amap-markers>

四、自定义图标

默认图标虽然中规中矩，但谁说标记不能有自己的个性？上传自定义图标，在标记组件中指定图标 URL，让标记尽情展现独特魅力。

<amap-marker :position="center" icon="path/to/custom-icon.png" title="标记标题" content="标记内容"></amap-marker>

五、动画效果

静止的标记固然不错，但有了动画效果，它们就活过来了！animation 属性赋予标记动态生命，让它们下落、弹跳，尽显生动。

<amap-marker :position="center" icon="path/to/icon.png" title="标记标题" content="标记内容" :animation="AMAP_ANIMATION_BOUNCE"></amap-marker>

结语

这些标记技巧让你在高德地图上自由挥洒创意，让标记不仅仅是位置指示，更成为地图上灵动的视觉元素。

常见问题解答

1. 如何调整标记大小？

   标记大小由 size 属性控制，单位为像素，默认值为 28px。

2. 如何控制标记的层级顺序？

   通过 zIndex 属性设置标记的层级顺序，值越大，标记越靠前。

3. 标记可以作为链接吗？

   是的，使用 click 事件监听器，在标记被点击时执行动作。

4. 如何获取标记的地理位置信息？

   使用 position 属性获取标记的位置，它是一个对象，包含经度和纬度信息。

5. 如何删除标记？

   使用 destroy 方法，可以在不再需要时从地图上删除标记。