javascript - Vue/Google Maps infoWindow 包括点击

Question

我已经在 Vue 项目中实现了 Google Maps API，我会使用像 vue2-google-maps 这样的库。但是我的一所大学告诉我最好使用普通的 JavaScript API，因为我们可能有很多标记，而且根据他的经验，当标记很多时，库真的很挣扎。
所以现在我创建了这个方法来使用 Vue 在页面上呈现 Google map - map :

methods: {
  async generateMap() {
    // Start and await Google script
    const google = await gmapsInit();

    // Create Google Map object
    this.map = new google.maps.Map(this.$el, {
      zoom: 7,
      center: new google.maps.LatLng(52.100886023504415, 5.6446197918489)
    });

    // Standplaats is an object containg a name, lat, lon and slug
    this.standplaatsen.forEach(standplaats => {
      const position = {
        lat: standplaats.location.latitude,
        lng: standplaats.location.longitude
      };

      // Create the marker and add to map
      const marker = new google.maps.Marker({
        position: 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>${standplaats.posts} opdrachten beschikbaar</a>` +
            `</div>`
        });

        infoWindow.open(this.map, marker);
      });
    });
  },
}

infoWindow 包含一个超链接( <a>${standplaats.posts} opdrachten beschikbaar</a> )，我想触发一个 Vue emit单击此超链接时的事件。由于此 HTML 是通过 Google API 呈现的，因此我不能只包含 @click事件。
我想到的解决方案是在超链接元素中包含一个唯一的 ID，然后直接添加一个 eventListeren，就像这样

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 id="${standplaats.slug}">${standplaats.posts} opdrachten beschikbaar</a>` +
      `</div>`
  });

  infoWindow.open(this.map, marker);

  document.getElementById(`${standplaats.slug}`).addEventListener("click", () => {
    console.log('I\'ve been clicked');
  });
});

但这不起作用，因为 Google API 需要一段时间来呈现元素，我可以解决此问题的唯一方法是将 eventListerener 包装在 1 秒超时内，但这整个事情现在开始感觉很糟糕...
有关如何处理此问题的任何建议？

Answer 1

我会建议三件事:

如果您可以传递任何回调，或者单击内容确实会发出一些监听器，请检查 Google API 文档。那将是最好的。

只是为了使其工作，您可以将监听器添加到 document并检查 click event.target如果它与您的元素匹配 id .像这样:

 document.addEventListener("click", (event) => {
  if (event.target.id && event.target.id === standplaats.slug) {
    console.log('I\'ve been clicked');
  }
});

可以尝试将一个Vue Component作为内容，并添加@click那里。但我不确定这是否会奏效。刚刚飞到我的脑海里😉