用vue代码展示

以下是一个基于Vue的简单示例，演示如何在地图上添加SVG元素：

<template>
  <div class="map-container">
    <div ref="map" class="map"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      map: null,
      marker: null,
    };
  },
  mounted() {
    // 初始化地图
    this.map = new BMap.Map(this.$refs.map);
    this.map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);

    // 创建一个SVG元素
    const svg = `<svg width="20" height="20">
      <circle cx="10" cy="10" r="5" fill="red" />
    </svg>`;

    // 创建一个标记，并将SVG元素添加到标记上
    this.marker = new BMap.Marker(new BMap.Point(116.404, 39.915));
    this.marker.setIcon(new BMap.Icon(`data:image/svg+xml;utf-8,${svg}`));

    // 将标记添加到地图上
    this.map.addOverlay(this.marker);
  },
};
</script>

<style>
.map-container {
  width: 100%;
  height: 500px;
  position: relative;
}

.map {
  width: 100%;
  height: 100%;
}
</style>

在这个示例中，我们使用百度地图API创建一个地图，并在地图上添加了一个SVG元素的标记。我们使用Vue的`mounted`生命周期钩子在组件挂载后初始化地图，并在标记上添加SVG元素。

具体来说，我们使用SVG的标准语法创建了一个简单的红色圆形。然后，我们使用`BMap.Icon`类创建了一个地图标记，并将SVG元素添加到标记图标上。最后，我们使用`map.addOverlay`方法将标记添加到地图上。

需要注意的是，这只是一个简单的示例，实际应用中可能需要更复杂的SVG元素和交互。但是，这个示例可以帮助你了解如何在Vue中使用SVG和地图API结合创建交互式地图。