我已创建了一个自动完成表单,因此用户无需输入所有地址字段。在底部,我包含了他从autoComplete中选择的位置的地图和街道视图,但是在用户拖动标记后我想更新所有字段以显示更新的标记位置但我只能获得更新纬度/经度不是新的地名,城市,邮政编码等,请查看我的代码(我需要帮助的代码位于底部)并感谢您的帮助。
//autocomplete address functionality
function initMap() {
var input = document.getElementById('searchTextField');
var autocomplete = new google.maps.places.Autocomplete(input);
google.maps.event.addListener(autocomplete, 'place_changed', function () {
var place = autocomplete.getPlace();
//auto fill the address fields
document.getElementById('city2').value = place.name;
document.getElementById('cityLat').value = place.geometry.location.lat();
document.getElementById('cityLng').value = place.geometry.location.lng();
document.getElementById('city').value = (place.address_components[3].long_name);
document.getElementById('state').value = (place.address_components[5].long_name);
document.getElementById('zip').value = (place.address_components[7].short_name);
loadMaps();
});
}
google.maps.event.addDomListener(window, 'load', initMap);
function loadMaps() {
//add map to page
var map = new google.maps.Map(document.getElementById('googleMap'), {
zoom: 17,
center: new google.maps.LatLng($('#cityLat').val(), $('#cityLng').val()),
mapTypeId: google.maps.MapTypeId.ROADMAP,
scrollwheel: false
});
//add marker to map
var marker = new google.maps.Marker({
map: map,
draggable: true,
animation: google.maps.Animation.DROP,
position: new google.maps.LatLng($('#cityLat').val(), $('#cityLng').val()),
//title: 'Hello World!'
});
//add street view map
var panorama = new google.maps.StreetViewPanorama(document.getElementById('pano'), {
position: new google.maps.LatLng($('#cityLat').val(), $('#cityLng').val()),
scrollwheel: false,
pov: {
heading: 34,
pitch: 10
}
});
//functionality to unfreeze the map
$('#panelMaps').on('click', function () {
map.setOptions({ scrollwheel: true });
panorama.setOptions({ scrollwheel: true });
});
//update address field based on drag-able marker
google.maps.event.addListener(marker, "dragend", function () {
document.getElementById("cityLat").value = marker.getPosition().lat();
document.getElementById("cityLng").value = marker.getPosition().lng();
loadMaps();
document.getElementById("city2").value = 'add place name here'
document.getElementById("city").value = 'city here'
document.getElementById("state").value = 'state here'
document.getElementById("zip").value = 'zip code here'
});
}