谷歌地圖API V3：一類事件監聽

Question

它能夠檢測與谷歌地圖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()); 
    }); 

在這裏，我指定了一個Marker的實例。

根據谷歌地圖API規範，可以創建在一個特定的事件（例1）的監聽器，甚至用於在特定實例（實施例2）的特定事件創建的監聽器。

但它是可以檢測的同一類的所有實例相同的事件？例如，我可以在標記的所有實例上檢測到「dragend」事件嗎？

感謝

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