Google 映射事件侦听器 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());
  });

}

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

Answer 1

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

Google Maps Javascript API Reference: MarkerOptions

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

working fiddle

代码片段：

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>

Google 映射事件侦听器 dragend

Google maps event listener dragend

javascript

google-maps

google-maps-api-3

google-maps-markers

dom-events