Геокод маркера перетаскивания на Картах Google

ProgramBox

Геокод маркера перетаскивания на Картах Google

Post author:admin
Запись опубликована:23 марта, 2023
Post category:Вопросы по программированию

#jquery #google-maps #google-maps-api-3

#jquery #google-карты #google-maps-api-3

Вопрос:

Я геокодирую данные на основе местоположения и события перетаскивания маркера.

У меня есть следующий код, который работает нормально.

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

Я регистрирую событие перетаскивания дважды, и только регистрация его за пределами маркера щелчка не позволяет мне фиксировать событие перетаскивания вновь созданного маркера.

Как я могу зарегистрировать перетаскивание маркера при добавлении нового маркера с помощью события щелчка и реорганизовать код, чтобы исключить события регистрации маркеров и сохранить ненужные данные маркера в массиве.

Ссылка на демонстрацию

1. Что вы подразумеваете под «Как я могу определить и реорганизовать код, чтобы исключить события регистрации маркеров и сохранить ненужные данные маркера в массиве».? Что, по вашему мнению, не нужно? Почему?

2. Если уж на то пошло, как вы пытались это сделать? С какими проблемами вы столкнулись?

3. @geocodezip код работает нормально. как только я инициализирую маркер, я регистрирую событие перетаскивания на нем. как только я нажимаю область на карте, я хочу удалить старый маркер и сделать его перетаскиваемым. дважды мне нужно зарегистрировать одно и то же событие, и я чувствую, что делаю это неправильно.

Ответ №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 amp;amp; !! 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);
            }
        });
    }

рабочая скрипка