百度地图点聚合中marker的infowindow消失的问题

在百度地图的点聚合应用中,当点击marker展示infoWindow时,由于地图平移导致infoWindow消失。问题源于点聚合重绘时未保存infoWindow信息。通过研究文档,发现可以使用map.openInfoWindow()方法避免这个问题,但该方法无关闭事件监听。为解决关闭逻辑,需直接监听infoWindow的close事件。
摘要由CSDN通过智能技术生成

目前的业务场景是:地图中有多个点的点聚合,聚合点展开后,每个marker有自己的点击事件,点击时显示窗口信息。

做法是marker.openInfoWindow(infowin);

问题来了,每次点击时地图会自动将窗口平移到地图中心,这时窗口就消失了。

后调查发现,地图平移,缩放等操作会触发点聚合的重绘事件,重绘时markers中没有保存infowindow等信息,所以会被覆盖掉。

尝试在重绘时恢复infowindow,但是效果并不理想,会出现闪动的情况,遂放弃。

仔细看了下百度的文档发现infowindow有两种方式

1.在marker上添加infoWindow即做法是marker.openInfoWindow(infowin);

2.在map上绑定:map.openInfoWindow(infowin,point);

第二种方式会解决点聚合重绘覆盖infoWindow的问题,因为map对象只有一个而点聚合的markerClusterer每次都是new出来的。

但是,这里有个关闭事件的问题:通过marker绑定的infoWindow可以通过infowindowclose事件来处理关闭逻辑。但map上绑定infowindow是没有关闭事件的监听函数的。

这时需要通过infoWindow自己的close事件来处理关闭逻辑

 var infoWindow = new BMap.InfoWindow(content, opts);
 infoWindow.addEventListener("close", function () {
    that.clearOverlaysInParking();
 });

这样结合map.openInfoWindow(infowin,point);和InfoWindow的close事件可完美解决聚合点中显示信息窗口的问题

要在Vue实现百度地图聚合,可以按照以下步骤进行操作: 1. 首先,在Vue项目安装百度地图的JavaScript API。可以通过在`index.html`文件添加以下代码来引入百度地图的API: ```html <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=YOUR_API_KEY"></script> ``` 确保替换`YOUR_API_KEY`为你自己的百度地图API密钥。 2. 在Vue组件创建地图容器,并初始化地图。可以在`mounted`钩子函数添加以下代码: ```javascript mounted() { const map = new BMap.Map("map-container"); // 创建地图实例 const point = new BMap.Point(经度, 纬度); // 设置地图坐标 map.centerAndZoom(point, 15); // 初始化地图,设置地图缩放级别 this.map = map; // 将地图实例保存到组件数据 } ``` 确保替换`经度`和`纬度`为你希望地图显示的坐标。 3. 获取需要聚合的标记数据,并使用百度地图的`MarkerClusterer`类进行聚合。可以在`mounted`钩子函数添加以下代码: ```javascript mounted() { // ... const markers = []; // 存储标记的数组 // 添加标记地图markers数组 yourData.forEach((item) => { const point = new BMap.Point(item.lng, item.lat); const marker = new BMap.Marker(point); map.addOverlay(marker); markers.push(marker); }); // 创建聚合器并设置参数 const markerClusterer = new BMapLib.MarkerClusterer(map, { markers: markers, }); // ... } ``` 确保替换`yourData`为你的标记数据数组,每个标记的经度和纬度分别存储在`item.lng`和`item.lat`。 4. 在Vue组件添加地图容器的HTML代码。可以在组件模板添加以下代码: ```html <template> <div id="map-container" style="width: 100%; height: 400px;"></div> </template> ``` 确保根据需要设置地图容器的宽度和高度。 通过以上步骤,你就可以在Vue项目实现百度地图聚合效果了。记得在百度地图开放平台申请并获取到API密钥,并替换代码的`YOUR_API_KEY`。
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值