当用户在地图上拖动图钉时，我想自动将地址插入到输入中。
<script>
var lat = 41.013995; //default latitude
var lng = 28.979741; //default longitude
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"
});
google.maps.event.addListener(marker, 'dragend', function (event) {
document.getElementById("lat").value = event.latLng.lat();
document.getElementById("long").value = event.latLng.lng();
});
//if the position of the marker changes set latitude and longitude to
//current position of the marker
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
});
//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
draggable: true;
});
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
});
$('#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'));
}
});
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>
答案 0 :(得分：0)
使用Reverse Geocoding服务将latlng对象转换为格式化地址。
var geocoder = new google.maps.Geocoder;
/* .... */
google.maps.event.addListener(marker, 'dragend', function (event) {
document.getElementById("lat").value = event.latLng.lat();
document.getElementById("long").value = event.latLng.lng();
// Reverse geo code using latLng
geocoder.geocode({'location': event.latLng }, function(results, status) {
if (status === 'OK') {
if (results[0]) {
$('#search_new_places').val( results[0].formatted_address );
} else {
window.alert('No results found');
}
} else {
window.alert('Geocoder failed due to: ' + status);
}
});
});
查看更新的fiddle