[Google Maps api with React

Posted 2021-05-06

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

答案

您需要在标记上使用.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);
  });