vue-baidu-map如何实现标记

### 关于 Vue-Map 实现标记

在 `vue-baidu-map` 中实现标记可以通过使用组件 `<bm-marker>` 来完成。此组件允许开发者向地图添加各种类型的标记点，并可配置这些标记的各种属性，如位置、图标等。

对于基本的标记创建，仅需指定其地理坐标即可：

<baidu-map>
  <bm-marker :position="{lng: 116.404, lat: 39.915}" />
</baidu-map>

如果希望自定义标记使用的图像，则可通过传递给 `icon` 属性的对象来设定具体的图片路径及其他参数[^5]：

<template>
  <baidu-map class="map">
    <!-- 定义带自定义图标的标记 -->
    <bm-marker 
      :position="{lng: 116.404, lat: 39.915}"
      @click="infoWindowOpen"
      animation="BMAP_ANIMATION_BOUNCE"
      >
        <bm-icon
          url="/static/img/my-custom-icon.png"
          size="{width: 32, height: 32}">
        </bm-icon>
    </bm-marker>

    <!-- 可选的信息窗口 -->
    <bm-info-window v-if="showInfoWindow" title="点击关闭" style="display:none;" @close="infoWindowClose">欢迎来到北京!</bm-info-window>
  </baidu-map>
</template>

<script>
export default {
  data() {
    return {
      showInfoWindow: false,
    };
  },
  methods: {
    infoWindowOpen(e) {
      this.showInfoWindow = true;
    },
    infoWindowClose() {
      this.showInfoWindow = false;
    }
  }
};
</script>

上述代码片段展示了如何通过 `bm-icon` 子标签来自定义单个标记所使用的图标资源及其尺寸；同时也包含了当用户点击该标记时弹出信息框的功能示例。

为了提高用户体验，在大量标记存在的情况下推荐采用聚类技术以优化展示效果。这可以通过引入额外插件 `BmlMarkerClusterer` 并将其包裹住所有的 `bm-marker` 节点来轻松达成[^3]。