自定义百度地图信息窗口BMap InfoWindow

在Vue3中使用百度地图实现自定义信息窗口（Marker InfoWindow），你可以通过以下几个步骤来完成： 1. 首先，你需要在项目中引入百度地图API和Vue。如果你还没有安装，可以去官网（https://lbsyun.baidu.com/index.php?title=jswx）获取并按照文档集成。 2. 安装官方提供的`@baidu Maps API for Vue`库，如果尚未安装，可以在`npm`或`yarn`中运行命令： ```bash npm install @baidu/maps-api-for-vue # 或者 yarn add @baidu/maps-api-for-vue ``` 3. 在组件中设置和初始化地图： ```javascript <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）时显示信息窗口： ```javascript 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. 清理事件监听器（在销毁组件时关闭信息窗口）： ```javascript beforeDestroy() { this.map.removeEventListener('click', this.showInfoWindow); this.infoWindow.close(); }