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”函数将dragend侦听器分配给标记，这样您就不必在任何地方复制该代码。

    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

谷歌地图拖动标记GeoCode

1 个答案: