捕捉 google 地图事件，忽略地图上绘制的任何形状

Question

我显示地图（使用 Google 地图 API）并使用 mousemove event listener 检索鼠标光标的地理坐标。它工作正常，但任何形状都会 "shield" 地图，即当光标在形状上时，不再触发地图事件：

<html>

<head>
  <style>
    #map {
      height: 90%;
    }
    
    html,
    body {
      height: 100%;
    }
  </style>

  <script>
    var map0 = null;
    var defPosLat = 40.79;
    var defPosLng = -73.95;

    function initMap() {
      map0 = new google.maps.Map(document.getElementById('map'), {
        center: {
          lat: defPosLat,
          lng: defPosLng
        },
        zoom: 11
      });
      map0.addListener('mousemove', function(event) {
        document.getElementById("test").value = event.latLng.lat().toFixed(5) + ' ' + event.latLng.lng().toFixed(5);
      });
      var pCircle = new google.maps.Circle({
        map: map0,
        center: {
          lat: defPosLat,
          lng: defPosLng
        },
        radius: 10000
      });
    }
  </script>

  <script src="https://maps.googleapis.com/maps/api/js?callback=initMap&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk" async defer></script>

</head>

<body>
  <div id="map"></div>
  <input type="text" id="test">
</body>

</html>

更新。我无法设置 clickable: false 因为我需要形状可以点击。

Answer 1

将 clickable: false 添加到您的 Circle:

<html>

<head>
  <style>
    #map {
      height: 90%;
    }
    
    html,
    body {
      height: 100%;
    }
  </style>

  <script>
    var map0 = null;
    var defPosLat = 40.79;
    var defPosLng = -73.95;

    function initMap() {
      map0 = new google.maps.Map(document.getElementById('map'), {
        center: {
          lat: defPosLat,
          lng: defPosLng
        },
        zoom: 11
      });
      map0.addListener('mousemove', function(event) {
        document.getElementById("test").value = event.latLng.lat().toFixed(5) + ' ' + event.latLng.lng().toFixed(5);
      });
      var pCircle = new google.maps.Circle({
        map: map0,
        center: {
          lat: defPosLat,
          lng: defPosLng
        },
        clickable:false,
        radius: 10000
      });
    }
  </script>

  <script src="https://maps.googleapis.com/maps/api/js?callback=initMap&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk" async defer></script>

</head>

<body>
  <div id="map"></div>
  <input type="text" id="test">
</body>

</html>

Answer 2

除非您需要圆圈可点击，否则请在圆圈选项中设置 clickable: false。这将允许将鼠标事件传播到下方窗格。

另一种选择显然是将同一事件附加到您的圈子。见下文。

<html>

<head>
  <style>
    #map {
      height: 150px;
    }
    
    html,
    body {
      height: 100%;
    }
  </style>

  <script>
    var map0 = null;
    var defPosLat = 40.79;
    var defPosLng = -73.95;

    function initMap() {
      map0 = new google.maps.Map(document.getElementById('map'), {
        center: {
          lat: defPosLat,
          lng: defPosLng
        },
        zoom: 11
      });

      setMouseMove(map0);

      var pCircle = new google.maps.Circle({
        map: map0,
        center: {
          lat: defPosLat,
          lng: defPosLng
        },
        radius: 10000
      });

      setMouseMove(pCircle);
    }

    function setMouseMove(ob) {

      if (ob instanceof google.maps.Map || ob instanceof google.maps.Circle) {

        ob.addListener('mousemove', function(event) {
          document.getElementById("test").value = event.latLng.lat().toFixed(5) + ' ' + event.latLng.lng().toFixed(5);
        });
      }
    }
  </script>

  <script src="https://maps.googleapis.com/maps/api/js?callback=initMap&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk" async defer></script>

</head>

<body>
  <div id="map"></div>
  <input type="text" id="test">
</body>

</html>

编辑

另一种选择是从 Circle 触发地图上的 mousemove 事件。您仍然需要一个事件侦听器...

<html>

<head>
  <style>
    #map {
      height: 150px;
    }
    
    html,
    body {
      height: 100%;
    }
  </style>

  <script>
    var map0 = null;
    var defPosLat = 40.79;
    var defPosLng = -73.95;

    function initMap() {
      map0 = new google.maps.Map(document.getElementById('map'), {
        center: {
          lat: defPosLat,
          lng: defPosLng
        },
        zoom: 11
      });

      map0.addListener('mousemove', function(event) {
        document.getElementById("test").value = event.latLng.lat().toFixed(5) + ' ' + event.latLng.lng().toFixed(5);
      });

      var pCircle = new google.maps.Circle({
        map: map0,
        center: {
          lat: defPosLat,
          lng: defPosLng
        },
        radius: 10000
      });

      google.maps.event.addListener(pCircle, 'mousemove', function(e) {
        google.maps.event.trigger(map0, 'mousemove', {
          latLng: e.latLng
        })
      });
    }
  </script>

  <script src="https://maps.googleapis.com/maps/api/js?callback=initMap&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk" async defer></script>

</head>

<body>
  <div id="map"></div>
  <input type="text" id="test">
</body>

</html>

捕捉 google 地图事件，忽略地图上绘制的任何形状

catch google map event ignoring any shapes drawn on the map

google-maps

google-maps-api-3

编辑