Bootstrap锚点链接普通按钮生效，Google Maps InfoWindow按钮失效问题

我之前也碰到过类似的坑，InfoWindow里的动态生成元素经常会因为DOM绑定或Google Maps的事件拦截导致锚点失效，给你几个具体的解决思路：

1. 先排查锚点的基础写法 #

先确认你生成的按钮HTML有没有低级错误：

• 目标元素的id是否和锚点href完全匹配（大小写、特殊字符都要严格一致）
• 按钮的href是不是标准的#target-id格式，有没有多余的空格或符号
• 目标元素是否真的存在于当前页面的DOM中

比如正确的按钮写法应该是：

<a class="btn btn-primary" href="#contact-section">跳转到联系我们</a>

2. 用事件委托处理动态生成的按钮 #

因为InfoWindow里的内容是通过jQuery动态插入的，直接给按钮绑定click事件会无效，必须用事件委托来监听点击，手动触发锚点跳转。

把原来的按钮事件替换成这样：

// 给document绑定委托事件，精准匹配InfoWindow里的锚点按钮
$(document).on('click', '.info-window-anchor-btn', function(e) {
  // 阻止Google Maps可能拦截默认行为
  e.preventDefault();
  e.stopPropagation();
  
  // 获取目标锚点ID
  const targetId = $(this).attr('href');
  
  // 用平滑滚动实现跳转（也可以用Bootstrap自带的scroll方法）
  if ($(targetId).length) {
    $('html, body').animate({
      scrollTop: $(targetId).offset().top
    }, 500); // 500ms是滚动动画时长，可按需调整
  }
});

记得给InfoWindow里的按钮加一个专属类名（比如info-window-anchor-btn），这样事件委托能精准匹配，不会影响页面其他按钮。

3. 避免Google Maps的事件干扰 #

InfoWindow本身会绑定一些点击事件，可能会覆盖锚点的默认行为。你可以直接把按钮的href改成javascript:void(0)，完全交给自定义事件处理：

var contentString = '<a class="btn btn-primary info-window-anchor-btn" href="javascript:void(0)" data-target="#contact-section">跳转到联系我们</a>';

然后在事件委托里通过data-target获取目标：

$(document).on('click', '.info-window-anchor-btn', function(e) {
  e.preventDefault();
  e.stopPropagation();
  const targetId = $(this).data('target');
  if ($(targetId).length) {
    $('html, body').animate({
      scrollTop: $(targetId).offset().top
    }, 500);
  }
});

4. 验证InfoWindow的DOM渲染 #

有时候InfoWindow的内容可能被Google Maps自动修改，你可以右键点击InfoWindow里的按钮，选择“检查”，看看生成的HTML结构是否和预期一致，有没有出现标签被篡改、属性丢失的情况。

按照上面的步骤试一下，应该能解决按钮点击只改URL但不跳转的问题。

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