看起来你遇到了两个典型的地图交互坑，我之前做类似功能时也踩过一模一样的问题，给你分享下亲测有效的解决方案：

1. 信息框定位异常：点击后出现在上一个标记位置 #

问题根源 #

这基本是循环创建标记时的作用域/闭包问题。如果你的代码用var声明循环变量、标记或信息框实例，所有点击事件会共享同一个变量引用——简单说就是，循环结束后所有事件都指向最后一次循环的标记数据，导致点击新标记时，信息框还是用之前标记的位置。另外，复用同一个InfoBox实例却没重新设置位置，也会出现这种偏移。

修复方案 #

方案A：用ES6块级作用域（最简洁）

把循环里的变量换成let/const，确保每次循环都创建独立的作用域，保存当前标记和信息框的专属引用：

// 假设你的标记数据数组是markers
for (let i = 0; i < markers.length; i++) {
  // 用const声明，每个循环都生成独立的marker实例
  const marker = new google.maps.Marker({
    position: markers[i].latlng,
    map: map
  });

  // 每个标记对应一个独立的InfoBox实例
  const infobox = new InfoBox({
    content: markers[i].content,
    // 这里不用预先设position，点击时绑定更可靠
  });

  // 绑定点击事件，确保指向当前循环的marker和infobox
  google.maps.event.addListener(marker, 'click', () => {
    // 强制把信息框定位到当前标记的坐标
    infobox.setPosition(marker.getPosition());
    infobox.open(map, marker);
  });
}

方案B：立即执行函数（兼容旧环境）

如果需要支持ES6之前的浏览器，用IIFE把每个循环的上下文包裹起来，隔离作用域：

for (var i = 0; i < markers.length; i++) {
  // 通过IIFE传递当前循环的index，创建独立作用域
  (function(index) {
    var marker = new google.maps.Marker({
      position: markers[index].latlng,
      map: map
    });

    var infobox = new InfoBox({
      content: markers[index].content
    });

    google.maps.event.addListener(marker, 'click', function() {
      infobox.setPosition(marker.getPosition());
      infobox.open(map, marker);
    });
  })(i);
}

2. 点击信息框关闭按钮（X）触发链接跳转 #

问题根源 #

关闭按钮一般是<a href="#">标签，点击时会触发默认的锚点跳转行为；同时事件冒泡可能会触发地图或标记的点击事件，导致意外跳转。

修复方案 #

方案A：直接在按钮上阻止默认行为

给关闭按钮添加onclick事件，直接阻止跳转和冒泡：

<!-- 假设你的信息框内容里的关闭按钮结构 -->
<a href="#" class="infobox-close" onclick="handleCloseInfobox(event)">X</a>

对应的JS函数：

function handleCloseInfobox(e) {
  // 阻止默认的锚点跳转行为
  e.preventDefault();
  // 阻止事件冒泡到父元素（比如标记或地图）
  e.stopPropagation();
  
  // 关闭当前信息框
  // 如果你保存了infobox实例，直接调用close()即可
  // 或者通过DOM找到信息框容器隐藏
  const infobox = e.target.closest('.infobox-container'); // 替换成你的信息框类名
  infobox.style.display = 'none';
  // 如果是Google Maps的InfoBox实例，记得调用infobox.close()
}

方案B：事件委托（更优雅的批量处理）

如果有多个信息框，用事件委托统一处理关闭按钮，避免重复绑定事件：

// 监听document的点击事件，判断目标是否是关闭按钮
document.addEventListener('click', function(e) {
  if (e.target.classList.contains('infobox-close')) {
    e.preventDefault();
    e.stopPropagation();
    
    // 找到对应的InfoBox实例并关闭
    // 这里假设你把每个infobox实例存在了容器的dataset里
    const infoboxContainer = e.target.closest('.infobox-container');
    const infoboxInstance = window.infoboxMap.get(infoboxContainer.dataset.id);
    infoboxInstance.close();
  }
});

// 循环创建标记时，把infobox实例存入Map方便查找
window.infoboxMap = new Map();
for (let i = 0; i < markers.length; i++) {
  // ... 创建marker和infobox的代码 ...
  const infoboxId = `infobox-${i}`;
  infobox.setContent(`<div class="infobox-container" data-id="${infoboxId}">${markers[i].content}</div>`);
  window.infoboxMap.set(infoboxId, infobox);
}

如果你的代码用了特定地图库（比如Leaflet、高德地图），可以调整上面的API适配，但核心思路是一致的：解决作用域问题确保每个信息框绑定正确的标记位置，阻止默认事件避免关闭按钮误跳转。

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