Google Map开发问题：关闭InfoBox时地图缩放复原及单InfoBox控制

嘿，我来帮你搞定这两个Google Maps InfoBox的问题，这俩需求其实挺常见的，我给你整理了可行的解决方案，附带代码示例，你可以直接拿去测试～

要实现这个功能，核心思路是在打开InfoBox前，先把当前地图的缩放级别和中心位置保存下来，等InfoBox关闭的时候，再用保存的状态复原地图。

具体实现步骤： #

1. 定义两个变量（可以放在地图实例的作用域内，或者全局），用来存储打开InfoBox前的地图状态：

   let prevZoom; // 保存之前的缩放级别
   let prevCenter; // 保存之前的地图中心坐标
   

2. 在触发打开InfoBox的事件（比如标记的点击事件）里，先记录当前地图状态，再打开InfoBox：

   marker.addListener('click', function() {
     // 保存当前地图状态
     prevZoom = map.getZoom();
     prevCenter = map.getCenter();
   
     // 打开InfoBox的逻辑（设置内容并显示）
     infoBox.setContent('<div>你的InfoBox内容</div>');
     infoBox.open(map, this);
   });
   

3. 给InfoBox添加关闭事件监听，在关闭时复原地图：

   // 监听InfoBox的关闭事件
   google.maps.event.addListener(infoBox, 'closeclick', function() {
     // 复原地图的缩放和中心位置
     map.setZoom(prevZoom);
     map.setCenter(prevCenter);
   });
   

这样每次关闭InfoBox时，地图就会自动回到打开InfoBox之前的状态啦～

这个需求的关键是维护一个“当前活跃的InfoBox”实例，每次要打开新的InfoBox前，先检查是否有已经打开的，有的话就关闭它，再打开新的。

具体实现步骤： #

1. 定义一个变量来跟踪当前活跃的InfoBox：

   let activeInfoBox = null; // 存储当前打开的InfoBox实例
   

2. 在标记的点击事件里，处理InfoBox的打开逻辑：

   marker.addListener('click', function() {
     // 如果已有活跃的InfoBox，先关闭它
     if (activeInfoBox !== null) {
       activeInfoBox.close();
     }
   
     // 创建新的InfoBox实例（也可以复用已有的，根据你的需求调整）
     const newInfoBox = new InfoBox({
       content: '<div>当前标记的InfoBox内容</div>',
       // 其他InfoBox配置项，按需调整
       disableAutoPan: false,
       pixelOffset: new google.maps.Size(-140, 0),
       boxStyle: {
         background: '#fff',
         padding: '10px',
         borderRadius: '4px',
         boxShadow: '0 2px 6px rgba(0,0,0,0.3)'
       }
     });
   
     // 打开新的InfoBox
     newInfoBox.open(map, this);
     // 更新活跃InfoBox为当前打开的这个
     activeInfoBox = newInfoBox;
   
     // 给新的InfoBox添加关闭事件，清空activeInfoBox
     google.maps.event.addListener(newInfoBox, 'closeclick', function() {
       activeInfoBox = null;
     });
   });
   

额外提示： #

如果你的场景是复用同一个InfoBox实例（而不是每次创建新的），可以简化逻辑：只需要在每次点击时更新InfoBox的内容，先关闭再打开，同时维护activeInfoBox的状态即可。

内容的提问来源于stack exchange，提问作者DigitalOutcast