谷歌地图拖动标记GeoCode

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);
    }
  }
}

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

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

链接到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);
            }
        });
    }

工作小提琴