Интересно, сможет ли кто-нибудь мне помочь, пожалуйста.
Я собрал некоторое кодирование (см. Ниже), когда пользователь переходит на HTML-форму, вводит адрес и нажимает кнопку «Поиск». После этого местоположение отображается на карте Google, а координаты широты и долготы автоматически вводятся в соответствующие текстовые поля в моей форме.
Что бы я хотел сделать, если это вообще возможно, чтобы перетаскивать маркер, чтобы пользователь мог точно настроить местоположение, а когда он перетаскивал маркер, я бы хотел, чтобы поля Lat и Long изменились их
связанные координаты.
Кроме того, я бы также хотел, если это вообще возможно, иметь поле в форме под названием 'NearestAddress', чтобы показать ближайший адрес, куда был перетащен маркер.
Мне удалось сделать маркеры перетаскиваемыми, но они не обновляют текстовые поля Широта и Долгота. Я также не уверен, как добавить функциональность, чтобы показать обновленный адрес, куда маркер был перетащен.
(function() {
// Defining some global variables
var map, geocoder, myMarker, infowindow;
window.onload = function() {
// Creating a new map
var options = {
zoom: 3,
center: new google.maps.LatLng(55.378051,-3.435973),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map'), options);
// Getting a reference to the HTML form
var form = document.getElementById('LocationSearchForm');
// Catching the forms submit event
form.onsubmit = function() {
// Getting the address from the text input
var address = document.getElementById('Address').value;
// Making the Geocoder call
getCoordinates(address);
// Preventing the form from doing a page submit
return false;
}
}
// Create a function the will return the coordinates for the address
function getCoordinates(address) {
// Check to see if we already have a geocoded object. If not we create one
if(!geocoder) {
geocoder = new google.maps.Geocoder();
}
// Creating a GeocoderRequest object
var geocoderRequest = {
address: address
}
// Making the Geocode request
geocoder.geocode(geocoderRequest, function(results, status) {
// Check if status is OK before proceeding
if (status == google.maps.GeocoderStatus.OK) {
// Center the map on the returned location
map.setCenter(results[0].geometry.location);
// Creating a new marker and adding it to the map
var myMarker = new google.maps.Marker({
map: map,
position: results[0].geometry.location,
draggable:true
});
document.getElementById('Latitude').value= results[0].geometry.location.lat();
document.getElementById('Longitude').value= results[0].geometry.location.lng();
google.maps.event.addListener(myMarker, 'dragend', function(evt){
document.getElementById('current').innerHTML = '<p>Marker dropped: Current Lat: ' + evt.latLng.lat().toFixed(3) + ' Current Lng: ' + evt.latLng.lng().toFixed(3) + '</p>';
});
google.maps.event.addListener(myMarker, 'dragstart', function(evt){
document.getElementById('current').innerHTML = '<p>Currently dragging marker...</p>';
});
map.setCenter(myMarker.position);
myMarker.setMap(map);
}
});
}
})();
Я новичок в разработке карт Google, и я даже не уверен, возможно ли достичь того, чего я хочу. Я работаю над этим уже несколько недель, и это сводит меня с ума, поэтому, если кто-то, возможно, укажет мне правильное направление, это будет с благодарностью получено.
Большое спасибо и всего наилучшего
Chris