[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()); 
        }); 

或（ex 2）

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

这里，我指定了一个Marker的实例。

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

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

Answer 1

[如果您有多个标记，并试图为每个标记创建一个事件，在这种情况下为dragend事件，则需要将其包括在生成标记的for循环中。

下面的代码段假设您正在尝试拖动标记后获得其经度和纬度。这些值将插入到地图下方的输入框中。

#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