Vue项目采用原生Google Maps API时InfoWindow内链接如何触发Vue事件

现有实现失效的核心原因 #

你之前在infoWindow.open()执行后立刻查询DOM绑定事件失败，本质是InfoWindow的渲染流程是异步的：调用open()只是向浏览器发起渲染请求，DOM节点并不会立刻插入到页面中，直接通过document.getElementById自然找不到目标元素。用setTimeout延迟绑定的方式，本质是靠时间差赌渲染完成的时机，遇到网络波动或地图卡顿的时候依然会失效，工程性很差。

方案1：利用InfoWindow内置的domready事件 #

这是Google Maps官方提供的标准回调，会在InfoWindow的DOM内容完全渲染、挂载到页面之后才触发，完全替代setTimeout的时序方案，结果完全可控。
实现上不需要给a标签加全局唯一的id，而是通过InfoWindow自身的内容上下文做元素查询，避免全局选择器的冲突：

marker.addListener("click", () => {
  const infoWindow = new google.maps.InfoWindow({
    content: `
      <div>
        <h4>${standplaats.name}</h4>
        ${standplaats.location.street}<br/>
        ${standplaats.location.zipcode} ${standplaats.location.location}<br/>
        <hr/>
        <a class="opdracht-link" data-slug="${standplaats.slug}">
          ${standplaats.posts} opdrachten beschikbaar
        </a>
      </div>
    `
  });

  infoWindow.open(this.map, marker);

  // 等待InfoWindow渲染完成后再绑定事件
  infoWindow.addListener("domready", () => {
    const linkEl = infoWindow.content.querySelector(".opdracht-link");
    linkEl.addEventListener("click", (e) => {
      e.preventDefault();
      // 直接访问组件实例，触发Vue的emit事件
      this.$emit("opdracht-list-click", standplaats);
    });
  });
});

这个方案实现简单，每个InfoWindow的逻辑完全独立，适合标记数量不多的场景。

方案2：基于地图容器的全局事件委托（适配大量标记场景） #

考虑到你的项目需要承载大量标记点，全局事件委托是性能最优的方案——只需要在地图初始化时，给地图根容器绑一次点击监听，后续所有InfoWindow内的链接点击都会通过事件冒泡被捕获，不需要每次InfoWindow打开都重复绑定事件，大幅减少内存占用和泄漏风险。
实现代码：

async generateMap() {
  const google = await gmapsInit();
  this.map = new google.maps.Map(this.$el, {
    zoom: 7,
    center: new google.maps.LatLng(52.100886023504415, 5.6446197918489)
  });

  // 仅绑定一次全局点击委托，覆盖所有InfoWindow内的链接
  this.$el.addEventListener("click", (e) => {
    const targetLink = e.target.closest(".opdracht-link");
    if (!targetLink) return;
    e.preventDefault();
    // 从自定义属性中读取标记对应的slug，触发emit
    const slug = targetLink.dataset.slug;
    this.$emit("opdracht-list-click", slug);
  });

  // 渲染所有标记的逻辑保持原有逻辑即可
  this.standplaatsen.forEach(standplaats => {
    const position = {
      lat: standplaats.location.latitude,
      lng: standplaats.location.longitude
    };
    const marker = new google.maps.Marker({
      position,
      title: standplaats.name,
      map: this.map
    });

    marker.addListener("click", () => {
      const infoWindow = new google.maps.InfoWindow({
        content: `
          <div>
            <h4>${standplaats.name}</h4>
            ${standplaats.location.street}<br/>
            ${standplaats.location.zipcode} ${standplaats.location.location}<br/>
            <hr/>
            <a class="opdracht-link" data-slug="${standplaats.slug}">
              ${standplaats.posts} opdrachten beschikbaar
            </a>
          </div>
        `
      });
      infoWindow.open(this.map, marker);
    });
  });
}

这个方案的优势：

• 用closest做目标匹配，哪怕用户点击的是a标签内部的子元素，也能正确识别触发源
• 完全不存在时序问题，不管InfoWindow什么时候渲染完成，点击都会被冒泡机制捕获，不需要监听domready事件
• 动态渲染的DOM销毁时，不需要手动移除之前绑定的事件，从根源上避免了内存泄漏，完全匹配你项目需要承载大量标记点的性能要求

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