jquery - Google map 拖动标记地理编码

Question

我正在根据位置和标记拖动事件对数据进行地理编码。

我有以下代码，可以正常工作。

var geocoder;
var map;
var markersArray = [];
var mapOptions = {
  center: new google.maps.LatLng(12.971599, 77.594563),
  zoom: 14,
  mapTypeId: google.maps.MapTypeId.ROADMAP
}
var marker;

function initialize() {
  geocoder = new google.maps.Geocoder();
  map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
  codeAddress();
}
google.maps.event.addDomListener(window, 'load', initialize);

$("#gmaps").submit(function() {
  codeAddress();
  return false;
});
function codeAddress() {
  var address = $("#place").val();
  geocoder.geocode({
    'address': address
  }, function (results, status) {
    if (status == google.maps.GeocoderStatus.OK) {

      map.setCenter(results[0].geometry.location);

      if (marker) marker.setMap(null);

      marker = new google.maps.Marker({
        map: map,
        position: results[0].geometry.location,
        draggable: true
      });

      markersArray.push(marker);

      google.maps.event.addListener(map, 'click', function(event) {
        clearOverlays() ;
        map.panTo(event.latLng);
        map.setCenter(event.latLng);
        marker = new google.maps.Marker({
          map: map,
          position: event.latLng,
          draggable: true
        });
        markersArray.push(marker);
        document.getElementById('lat').value = marker.getPosition().lat().toFixed(6);
        document.getElementById('lng').value = marker.getPosition().lng().toFixed(6);

        google.maps.event.addListener(marker, "dragend", function () {
          document.getElementById('lat').value = marker.getPosition().lat().toFixed(6);
          document.getElementById('lng').value = marker.getPosition().lng().toFixed(6);
        });

      });

      google.maps.event.addListener(marker, "dragend", function () {
        document.getElementById('lat').value = marker.getPosition().lat().toFixed(6);
        document.getElementById('lng').value = marker.getPosition().lng().toFixed(6);
      });

      document.getElementById('lat').value = marker.getPosition().lat().toFixed(6);
      document.getElementById('lng').value = marker.getPosition().lng().toFixed(6);

    } else {
      alert('Geocode was not successful for the following reason: ' + status);
    }
  });
}
// Removes the overlays from the map, but keeps them in the array
function clearOverlays() {
  if (markersArray) {
    for (i in markersArray) {
      markersArray[i].setMap(null);
    }
  }
}

我注册了两次拖动事件，并且仅在点击标记之外注册它不允许我捕获新创建的标记的拖动事件。

如何在通过单击事件添加新标记时注册标记上的拖动，并重构代码以消除标记的注册事件并将不必要的标记数据存储在数组中。

Link to Demo

Answer 1

使用“createMarker”函数将拖尾监听器分配给标记，这样您就不必在任何地方复制该代码。

    var geocoder;
    var map;
    var markersArray = [];
    var mapOptions = {
        center: new google.maps.LatLng(12.971599, 77.594563),
        zoom: 14,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    var marker;

    function createMarker(latLng) {
        if ( !! marker && !! marker.setMap) marker.setMap(null);
        marker = new google.maps.Marker({
            map: map,
            position: latLng,
            draggable: true
        });

        document.getElementById('lat').value = marker.getPosition().lat().toFixed(6);
        document.getElementById('lng').value = marker.getPosition().lng().toFixed(6);

        google.maps.event.addListener(marker, "dragend", function () {
            document.getElementById('lat').value = marker.getPosition().lat().toFixed(6);
            document.getElementById('lng').value = marker.getPosition().lng().toFixed(6);
        });
    }

    function initialize() {
        geocoder = new google.maps.Geocoder();
        map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
        codeAddress();

        google.maps.event.addListener(map, 'click', function (event) {
            map.panTo(event.latLng);
            map.setCenter(event.latLng);
            createMarker(event.latLng);
        });

    }
    google.maps.event.addDomListener(window, 'load', initialize);

    $("#gmaps").submit(function () {
        codeAddress();
        return false;
    });

    function codeAddress() {
        var address = $("#place").val();
        geocoder.geocode({
            'address': address
        }, function (results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                map.setCenter(results[0].geometry.location);
                createMarker(results[0].geometry.location);
            } else {
                alert('Geocode was not successful for the following reason: ' + status);
            }
        });
    }

working fiddle