单击多边形时不会触发单击地图

Question

我有一个简单的 google 地图，当我点击它时我想要触发警报：

let map;

function initMap() {
  map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: -34.397, lng: 150.644 },
    zoom: 8,
  });
  
  const triangleCoords = [
    { lat: -34.397, lng: 150.644 },
    { lat: -33.5, lng: 152 },
    { lat: -34.4, lng: 149 },
  ];
  const triangle = new google.maps.Polygon({
     paths: triangleCoords,
  });
  triangle.setMap(map);
        
  google.maps.event.addListener(map, "click", (e) => {
  alert('there was a click')
  const result = google.maps.geometry.poly.containsLocation(
     e.latLng,
     triangle
  );
  
  if(result)alert('inside triangle')
  else alert('outside triangle')
});

}

fiddle

但是，当我点击多边形时，事件没有被触发，警报也没有触发。在多边形之外它确实有效。

我做错了什么？

Answer 1

google.maps.Polygon captures click when it is "clickable" (defaults to true). If you set clickable:false, the map click listener function will run. From the documentation:

clickable optional
Type: boolean optional
Indicates whether this Polygon handles mouse events. Defaults to true.

相关问题：

（另一种选择是将 Polygon 保留为 clickable:true，但将相同的事件侦听器添加到 Polygon）

proof of concept fiddle

代码片段：

let map;

function initMap() {
  map = new google.maps.Map(document.getElementById("map"), {
    center: {
      lat: -34.397,
      lng: 150.644
    },
    zoom: 8,
  });

  const triangleCoords = [{
      lat: -34.397,
      lng: 150.644
    },
    {
      lat: -33.5,
      lng: 152
    },
    {
      lat: -34.4,
      lng: 149
    },
  ];
  const triangle = new google.maps.Polygon({
    paths: triangleCoords,
    clickable: false
  });
  triangle.setMap(map);

  google.maps.event.addListener(map, "click", (e) => {
    alert('there was a click')
    const result = google.maps.geometry.poly.containsLocation(
      e.latLng,
      triangle
    );

    if (result) alert('inside triangle')
    else alert('outside triangle')
    /* console.log(result) */

  });

}

/* Always set the map height explicitly to define the size of the div
       * element that contains the map. */

#map {
  height: 100%;
}


/* Optional: Makes the sample page fill the window. */

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

<!DOCTYPE html>
<html>

<head>
  <title>Simple Map</title>
  <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
  <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap&libraries=&v=weekly" defer></script>
  <!-- jsFiddle will insert css and js -->
</head>

<body>
  <div id="map"></div>
</body>

</html>

单击多边形时不会触发单击地图

click on map doesn't get triggered when the click is on a polygon

javascript

google-maps

polygon