谷歌地图 API 与 React答案

【问题标题】：Google maps api with React谷歌地图 API 与 React
【发布时间】：2023-03-24 18:50:01
【问题描述】：

我目前正在开展一个项目，并多次尝试将可点击标记包含到我的地图中。我已经使用了 google-maps-react 库，但是我没有设法获得一个显示信息的标记并且能够单击此信息窗口上的按钮。我读过 Marker 默认情况下不可点击，但还有其他方法吗？或者是否有任何教程或代码可以解释提前谢谢你...

【问题讨论】：

标签： reactjs google-maps-api-3

【解决方案1】：

您需要在标记上使用 .addListener() 并告诉它打开一个信息窗口（或您想要对标记单击执行的任何操作）。

您可以在 Google API 文档here 中找到示例

  // Add a marker to the map
  const marker = new google.maps.Marker({
    // position of the marker on map
    position: { lat: 53.3, lng: -6.3 }, 
    // the map object you want the marker on
    map: map, 
  });

  // add a listener to the marker which listens for a 'click' 
  // and runs the callback when it 'hears' one
  marker.addListener('click', () => {
    // set the content of the info window. This can be formatted using HTML
    infowindow.setContent('I have been clicked!');
    // tells the infowindow on which map to open and which marker to anchor to
    infowindow.open(map, marker);
  });

【讨论】：