vue3百度地图自定义信息窗口

在Vue3中使用百度地图实现自定义信息窗口（Marker InfoWindow），你可以通过以下几个步骤来完成：

1. 首先，你需要在项目中引入百度地图API和Vue。如果你还没有安装，可以去官网（https://lbsyun.baidu.com/index.php?title=jswx）获取并按照文档集成。

2. 安装官方提供的`@baidu Maps API for Vue`库，如果尚未安装，可以在`npm`或`yarn`中运行命令：

   npm install @baidu/maps-api-for-vue
   # 或者
   yarn add @baidu/maps-api-for-vue

3. 在组件中设置和初始化地图：

<template>
  <div ref="container" style="width: 100%; height: 500px;"></div>
</template>

<script>
import { createMap } from '@baidu/maps/api-for-vue';

export default {
  setup() {
    const map = createMap({
      container: this.$refs.container,
      zoom: 14,
      center: [116.39, 39.9], // 北京坐标
    });

    // 创建自定义信息窗口
    const infoWindow = new BMap.InfoWindow({
      content: '<div>这是自定义内容</div>',
      enableAutoPan: true,
    });

    return {
      map,
      infoWindow,
    };
  },
}
</script>

4. 当点击标记（Marker）时显示信息窗口：

methods: {
  showInfoWindow(event) {
    if (event.target instanceof BMap.Marker) {
      const position = event.target.getPosition();
      this.infoWindow.open(this.map, position);
    }
  },
},
mounted() {
  this.map.addEventListener('click', this.showInfoWindow);
}

5. 清理事件监听器（在销毁组件时关闭信息窗口）：

beforeDestroy() {
  this.map.removeEventListener('click', this.showInfoWindow);
  this.infoWindow.close();
}