Google Maps API V3 : event listener on a class

问题

It is possible to detect an event with Google Maps V3 API, for instance (ex 1) :

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

or (ex 2)

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

here, I specified an instance of a Marker.

According to Google Maps API Specification, one can create a listener on a particular event (example 1), and even create a listener for a particular event on a particular instance (example 2).

But is it possible to detect the same event for all the instances of a same class ? For instance, can i detect a "dragend" event on all the instances of Marker ?

Thanks

回答1:

If you have got multiple markers and are trying to create an event for each each marker, in this case the dragend event, you would need to include it in the for loop which generates your markers.

The snippet below assumes you are trying to get the longitude and latitude of a marker after it has been dragged. These values get inserted into the input boxes below the map.

#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>

More information in the docs

来源：https://stackoverflow.com/questions/32273326/google-maps-api-v3-event-listener-on-a-class