Google Maps API V3：类上的事件监听器

Question

可以使用 Google Maps V3 API 检测事件，例如（例如 1）：

 google.maps.event.addListener('drag', function(event) { 
            $("#latD").val(event.latLng.lat()); 
            $("#longD").val(event.latLng.lng()); 
        }); 

或（例如 2）

google.maps.event.addListener(markerDep, 'drag', function(event) { 
        $("#latD").val(event.latLng.lat()); 
        $("#longD").val(event.latLng.lng()); 
    }); 

在这里，我指定了一个标记的实例。

根据 Google Maps API 规范，可以为特定事件创建侦听器（示例 1），甚至可以为特定实例上的特定事件创建侦听器（示例 2）。

但是是否有可能为同一个类的所有实例检测到相同的事件？例如，我可以在所有 Marker 实例上检测到“dragend”事件吗？

Answer 1

如果您有多个标记并尝试为每个标记创建一个事件，在本例中为 dragend 事件，您需要将其包含在生成标记的 for 循环中。

下面的 sn-p 假设您在拖动标记后尝试获取标记的经度和纬度。这些值被插入到地图下方的输入框中。

#map {
  height: 250px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

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

<input id="latD" type="text">
<input id="longD" type="text">

<script>
// The following map creates complex markers to indicate destinations
// Note that the anchor is set to (0,32) to correspond to the base of the iamge.

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 2,
    scrollwheel: false,
    navigationControl: false,
    mapTypeControl: false,
    scaleControl: false,
    draggable: true,
    center: {lat: -2.75181, lng: 24.11768}
  });

    setMarkers(map);
  }

  // Data for the markers consisting of a name, a LatLng and a zIndex for the
  // order in which these markers should display on top of each other
  var destinations = [
    ['Congo', -2.72760, 23.52084, 1],
    ['South Africa', -33.58880, 20.07114, 1],
    ['Brazil', -6.26352, -57.38128, 1]
  ];

  function setMarkers(map) {
    // Adds markers to the map.

    // Marker sizes are expressed as a Size of X,Y where the origin of the image
    // (0,0) is located in the top left of the image.

    // Origins, anchor positions and coordinates of the marker increase in the X
    // direction to the right and in the Y direction down.
    var image = {
      url: 'http://i.imgur.com/OG4CZt3.png',
      // This marker is 32 pixels wide by 32 pixels high.
      size: new google.maps.Size(32, 32),
      // The origin for this image is (0, 0).
      origin: new google.maps.Point(0, 0),
      // The anchor for this image is just off centre (0, 10).
      anchor: new google.maps.Point(0, 10)
    };
    // Shapes define the clickable region of the icon. The type defines an HTML
    // <area> element 'poly' which traces out a polygon as a series of X,Y points.
    // The final coordinate closes the poly by connecting to the first coordinate.
    var shape = {
      coords: [1, 1, 1, 32, 30, 32, 30, 1],
      type: 'poly'
    };
    
    for (var i = 0; i < destinations.length; i++) {
      var destination = destinations[i];
      var marker = new google.maps.Marker({
          position: {lat: destination[1], lng: destination[2]},
          map: map,
          draggable: true,
          icon: image,
          shape: shape,
          animation: google.maps.Animation.DROP,
          title: destination[0],
          zIndex: destination[3],
      });

      marker.addListener('dragend', function() {
          jQuery("#latD").val(this.getPosition().lat()); 
          jQuery("#longD").val(this.getPosition().lng()); 
      });
    }
}
</script>

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

更多信息 in the docs