谷歌地图事件监听器 dragend

Question

我正在向我的标记添加一个事件侦听器，标记的功能是：

 function setupMarkerWaypoint() { console.log('setting waypoint marker'); waypointMarker = new google.maps.Marker({ position: default_latlng, map: mapBooking, icon: "http://maps.google.com/mapfiles/ms/micons/blue.png" }); waypointMarker.setVisible(true); function geocodePosition(pos) { geocoder.geocode({ 'latLng': pos }, function(responses) { if (responses && responses.length > 0) { updateMarkerAddress(responses[0].formatted_address); } else { updateMarkerAddress('Cannot determine address at this location.'); } }); } function updateMarkerAddress(str) { document.getElementById('AddWaypoint').innerHTML = str; } // Update current position info. geocodePosition(latLng); // Add dragging event listeners. google.maps.event.addListener(waypointMarker, 'dragend', function() { updateMarkerStatus('Drag ended'); geocodePosition(waypointMarker.getPosition()); }); }

但我无法在谷歌地图上拖动我的标记。 我应该做哪些必要的改变？

Answer 1

要使标记可拖动，请将其draggable属性设置为true 。

Google Maps Javascript API 参考：MarkerOptions

waypointMarker = new google.maps.Marker({
    position: default_latlng,
    map: mapBooking,
    draggable: true,
    icon:"http://maps.google.com/mapfiles/ms/micons/blue.png"
});

工作小提琴

代码片段：

 var geocoder; var mapBooking; var default_latlng function initialize() { mapBooking = new google.maps.Map( document.getElementById("map_canvas"), { center: new google.maps.LatLng(37.4419, -122.1419), zoom: 13, mapTypeId: google.maps.MapTypeId.ROADMAP }); geocoder = new google.maps.Geocoder(); default_latlng = mapBooking.getCenter(); setupMarkerWaypoint(); } google.maps.event.addDomListener(window, "load", initialize); function setupMarkerWaypoint() { console.log('setting waypoint marker'); waypointMarker = new google.maps.Marker({ position: default_latlng, map: mapBooking, draggable: true, icon: "http://maps.google.com/mapfiles/ms/micons/blue.png" }); waypointMarker.setVisible(true); function geocodePosition(pos) { geocoder.geocode({ 'latLng': pos }, function(responses) { if (responses && responses.length > 0) { updateMarkerAddress(responses[0].formatted_address); } else { updateMarkerAddress('Cannot determine address at this location.'); } }); } function updateMarkerAddress(str) { document.getElementById('AddWaypoint').innerHTML = str; } // Update current position info. geocodePosition(waypointMarker.getPosition()); // Add dragging event listeners. google.maps.event.addListener(waypointMarker, 'dragend', function() { // updateMarkerStatus('Drag ended'); geocodePosition(waypointMarker.getPosition()); }); }

 html, body, #map_canvas { height: 500px; width: 500px; margin: 0px; padding: 0px }

 <script src="https://maps.googleapis.com/maps/api/js?libraries=geometry,places"></script> <div id="map_canvas" style="border: 2px solid #3872ac;"></div> <div id="AddWaypoint"></div>