如何基于Google Maps API 3实现拖拽标记自动填充地址至输入框

Hey there! To get your map marker to auto-populate an address input when dragged, you'll need to add reverse geocoding (converting latitude/longitude to a human-readable address) using Google Maps' Geocoder service. Your current code already handles updating lat/long on drag, so we'll extend that to fetch and insert the address.

Step 1: Initialize the Geocoder #

First, add a Geocoder instance at the top of your script—this is what will handle converting coordinates to addresses:

var geocoder = new google.maps.Geocoder();

Step 2: Update the Dragend Event Handler #

Modify your existing dragend listener for the marker to call the geocoder, then populate your target address input. Let's assume your address input has an ID of address (adjust this to match your actual input ID):

google.maps.event.addListener(marker, 'dragend', function (event) {
  // Update lat/long inputs as before
  document.getElementById("lat").value = event.latLng.lat();
  document.getElementById("long").value = event.latLng.lng();

  // Reverse geocode to get address
  geocoder.geocode({ 'location': event.latLng }, function(results, status) {
    if (status === 'OK') {
      if (results[0]) {
        // Populate the address input with the formatted address
        document.getElementById("address").value = results[0].formatted_address;
      } else {
        window.alert('No results found');
      }
    } else {
      window.alert('Geocoder failed due to: ' + status);
    }
  });
});

Step 3: Sync with homeMarker's Position Change #

Your code also has a homeMarker with a position_changed listener. To keep things consistent, add the same reverse geocoding logic there too:

google.maps.event.addListener(homeMarker, 'position_changed', function(){
  var lat = homeMarker.getPosition().lat();
  var lng = homeMarker.getPosition().lng();
  // Update lat/long inputs if needed
  document.getElementById("lat").value = lat;
  document.getElementById("long").value = lng;

  // Reverse geocode for homeMarker
  geocoder.geocode({ 'location': homeMarker.getPosition() }, function(results, status) {
    if (status === 'OK') {
      if (results[0]) {
        document.getElementById("address").value = results[0].formatted_address;
      } else {
        window.alert('No results found');
      }
    } else {
      window.alert('Geocoder failed due to: ' + status);
    }
  });
});

Full Modified Script #

Here's the complete updated script with all changes integrated, plus a few fixes and quality-of-life improvements:

<script>
var lat = 41.013995; //default latitude
var lng = 28.979741; //default longitude
var geocoder = new google.maps.Geocoder(); // Initialize Geocoder
var homeLatlng = new google.maps.LatLng(lat, lng); //set default coordinates
var homeMarker = new google.maps.Marker({ //set marker
position: homeLatlng, //set marker position equal to the default coordinates
map: map, //set map to be used by the marker
draggable: true //make the marker draggable
});
var myOptions = {
center: new google.maps.LatLng(41.013995, 28.979741), //set map center
zoom: 17, //set zoom level to 17
mapTypeId: google.maps.MapTypeId.ROADMAP //set map type to road map
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); //initialize the map
var marker = new google.maps.Marker({
draggable: true,
position: homeLatlng,
map: map,
title: "Your location"
});

// Updated dragend listener with reverse geocoding
google.maps.event.addListener(marker, 'dragend', function (event) {
document.getElementById("lat").value = event.latLng.lat();
document.getElementById("long").value = event.latLng.lng();

// Reverse geocode to get address
geocoder.geocode({ 'location': event.latLng }, function(results, status) {
  if (status === 'OK') {
    if (results[0]) {
      document.getElementById("address").value = results[0].formatted_address;
    } else {
      window.alert('No results found');
    }
  } else {
    window.alert('Geocoder failed due to: ' + status);
  }
});
});

// Updated position_changed listener for homeMarker
google.maps.event.addListener(homeMarker, 'position_changed', function(){
var lat = homeMarker.getPosition().lat(); //set lat current latitude where the marker is plotted
var lng = homeMarker.getPosition().lng(); //set lat current longitude where the marker is plotted
document.getElementById("lat").value = lat;
document.getElementById("long").value = lng;

// Reverse geocode for homeMarker
geocoder.geocode({ 'location': homeMarker.getPosition() }, function(results, status) {
  if (status === 'OK') {
    if (results[0]) {
      document.getElementById("address").value = results[0].formatted_address;
    } else {
      window.alert('No results found');
    }
  } else {
    window.alert('Geocoder failed due to: ' + status);
  }
});
});

//if the center of the map has changed
google.maps.event.addListener(map, 'center_changed', function(){
var lat = homeMarker.getPosition().lat(); //set lat to current latitude where the marker is plotted
var lng = homeMarker.getPosition().lng(); //set lng current latitude where the marker is plotted
// Fixed: Removed invalid 'draggable: true;' line (was causing syntax error)
});

var input = document.getElementById('search_new_places'); //get element to use as input for autocomplete
var autocomplete = new google.maps.places.Autocomplete(input); //set it as the input for autocomplete
autocomplete.bindTo('bounds', map); //bias the results to the maps viewport

//executed when a place is selected from the search field
google.maps.event.addListener(autocomplete, 'place_changed', function(){
//get information about the selected place in the autocomplete text field
var place = autocomplete.getPlace();
if (place.geometry.viewport){ //for places within the default view port (continents, countries)
map.fitBounds(place.geometry.viewport); //set map center to the coordinates of the location
} else { //for places that are not on the default view port (cities, streets)
map.setCenter(place.geometry.location); //set map center to the coordinates of the location
map.setZoom(17); //set a custom zoom level of 17
}
homeMarker.setMap(map); //set the map to be used by the marker
homeMarker.setPosition(place.geometry.location); //plot marker into the coordinates of the location
// Optional: Update address input when selecting from autocomplete
document.getElementById("address").value = place.formatted_address;
});

$('#plot_marker').click(function(e){ //used for plotting the marker into the map if it doesn't exist already
e.preventDefault();
homeMarker.setMap(map); //set the map to be used by marker
homeMarker.setPosition(map.getCenter()); //set position of marker equal to the current center of the map
map.setZoom(17);
$('input[type=text], input[type=hidden]').val('');
});

$('#search_ex_places').blur(function(){//once the user has selected an existing place
var place = $(this).val(); //initialize values
var exists = 0;
var lat = 0;
var lng = 0;
$('#saved_places option').each(function(index){ //loop through the save places
var cur_place = $(this).data('place'); //current place description
//if current place in the loop is equal to the selected place
//then set the information to their respected fields
if(cur_place == place){
exists = 1;
$('#place_id').val($(this).data('id'));
lat = $(this).data('lat');
lng = $(this).data('lng');
$('#n_place').val($(this).data('place'));
$('#n_description').val($(this).data('description'));
$('#search_new_places').val($(this).data('kayitliyer'));
$('#n_yetkiliad').val($(this).data('yetkiliad'));
$('#n_magazaad').val($(this).data('magazaad'));
$('#n_telefon').val($(this).data('telefon'));
$('#y_telefon').val($(this).data('yetkilitelefon'));
$('#derece').val($(this).data('derece'));
// Optional: Update address input when selecting existing place
geocoder.geocode({ 'location': new google.maps.LatLng(lat, lng) }, function(results, status) {
  if (status === 'OK' && results[0]) {
    document.getElementById("address").value = results[0].formatted_address;
  }
});
}
});
if(exists == 0){//if the place doesn't exist then empty all the text fields and hidden fields
$('input[type=text], input[type=hidden]').val('');
}else{ //set the coordinates of the selected place
var position = new google.maps.LatLng(lat, lng); //set marker position
homeMarker.setMap(map);
homeMarker.setPosition(position); //set the center of the map
map.setCenter(homeMarker.getPosition());
map.setZoom(17);
}
});

$('#btn_save').click(function(){
var place = $.trim($('#n_place').val());
var description = $.trim($('#n_description').val());
var kayitliyer = $.trim($('#search_new_places').val());
var yetkiliad = $.trim($('#n_yetkiliad').val());
var magazaad = $.trim($('#n_magazaad').val());
var telefon = $.trim($('#n_telefon').val());
var yetkilitelefon = $.trim($('#y_telefon').val());
var derece = $.trim($('#derece').val());
var lat = homeMarker.getPosition().lat();
var lng = homeMarker.getPosition().lng();
$.post('save_place.php', {'place' : place, 'description' : description, 'lat' : lat, 'lng' : lng, 'kayitliyer' : kayitliyer, 'yetkiliad' : yetkiliad, 'magazaad' : magazaad, 'telefon' : telefon,'yetkilitelefon' : yetkilitelefon, 'derece' : derece}, function(data){
var place_id = data;
var new_option = $('<option>').attr({'data-id' : place_id, 'data-place' : place, 'data-lat' : lat, 'data-lng' : lng, 'data-description' : description, 'data-kayitliyer' : kayitliyer, 'data-yetkiliad' : yetkiliad, 'data-magazaad' : magazaad, 'data-telefon' : telefon,'data-yetkilitelefon': yetkilitelefon,'data-derece' : derece}).text(place);
new_option.appendTo($('#saved_places'));
} );
$('input[type=text], input[type=hidden]').val('');
});
</script>

Key Notes: #

• Input ID: Make sure the address input ID in the code matches the actual ID of your address input field. If your input uses a different ID (like search_new_places), replace document.getElementById("address") with that ID.
• Error Handling: The code includes basic error handling for geocoding failures (no results or service errors) to keep the user informed.
• Autocomplete Sync: I added an optional line to update the address input when selecting a place from autocomplete—this keeps the input consistent with all map interactions.
• Syntax Fix: Removed the invalid draggable: true; line from the center_changed listener (it was causing a syntax error and had no functional purpose).

内容的提问来源于stack exchange，提问作者CodeOfis