Lat，Lng不會更新當我拖動標記

Question

其實，我有一個帶有可拖動標記的地圖。這工作正常，但我不能更新拖動標記的lat和lng。我已經嘗試了幾個不同的事件監聽器，但它們都不起作用。現在我想知道有人能幫助我嗎？

我的代碼（我刪除了，你就不會感到困惑的腳本）：

<script> 
function initMap() { 
    var map = new google.maps.Map(document.getElementById('map'), { 
     zoom: 7, 
     center: { 
      lat: 47.532446, 
      lng: 14.623283 
     } 
    }); 
    var geocoder = new google.maps.Geocoder(); 

    document.getElementById('geolocate').addEventListener('click', function() { 
     geocodeAddress(geocoder, map); 
    }); 
    } 

function geocodeAddress(geocoder, resultsMap) { 
    var address = document.getElementById('street').value + ' ' + 
     document.getElementById('zip').value + ' ' + 
     document.getElementById('city').value; 

geocoder.geocode({ 
    'address': address 
}, function (results, status) { 
    if (status === google.maps.GeocoderStatus.OK) { 
     resultsMap.setCenter(results[0].geometry.location); 

     document.getElementById('lat').value = results[0].geometry.location.lat(); 
     document.getElementById('lng').value = results[0].geometry.location.lng(); 

     var marker = new google.maps.Marker({ 
      map: resultsMap, 
      position: results[0].geometry.location, 
      draggable: true 
     }); 

     resultsMap.setZoom(17); 
     resultsMap.panTo(marker.position); 
    } else { 
     alert('Geocode was not successful for the following reason: ' + status); 
    } 
}); 
} 
</script> 

我會很高興，如果有人可以幫助我。

Answer 1

你需要得到標記的位置，並更新表單字段時，標記拖動：

google.maps.event.addListener(marker,'dragend', function(evt) { 
    document.getElementById('lat').value = this.getPosition().lat(); 
    document.getElementById('lng').value = this.getPosition().lng(); 
}); 

代碼代碼段：

function initMap() { 
 
    var map = new google.maps.Map(document.getElementById('map'), { 
 
    zoom: 7, 
 
    center: { 
 
     lat: 47.532446, 
 
     lng: 14.623283 
 
    } 
 
    }); 
 
    var geocoder = new google.maps.Geocoder(); 
 

 
    document.getElementById('geolocate').addEventListener('click', function() { 
 
    geocodeAddress(geocoder, map); 
 
    }); 
 
} 
 

 
function geocodeAddress(geocoder, resultsMap) { 
 
    var address = document.getElementById('street').value + ' ' + 
 
    document.getElementById('zip').value + ' ' + 
 
    document.getElementById('city').value; 
 

 
    geocoder.geocode({ 
 
    'address': address 
 
    }, function(results, status) { 
 
    if (status === google.maps.GeocoderStatus.OK) { 
 
     resultsMap.setCenter(results[0].geometry.location); 
 

 
     document.getElementById('lat').value = results[0].geometry.location.lat(); 
 
     document.getElementById('lng').value = results[0].geometry.location.lng(); 
 

 
     var marker = new google.maps.Marker({ 
 
     map: resultsMap, 
 
     position: results[0].geometry.location, 
 
     draggable: true 
 
     }); 
 
     google.maps.event.addListener(marker, 'dragend', function(evt) { 
 
     document.getElementById('lat').value = this.getPosition().lat(); 
 
     document.getElementById('lng').value = this.getPosition().lng(); 
 
     }); 
 

 
     resultsMap.setZoom(17); 
 
     resultsMap.panTo(marker.position); 
 
    } else { 
 
     alert('Geocode was not successful for the following reason: ' + status); 
 
    } 
 
    }); 
 
} 
 
google.maps.event.addDomListener(window, 'load', initMap);

html, 
 
body, 
 
#map { 
 
    width: 100%; 
 
    height: 100%; 
 
}

<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<input type="button" id="geolocate" value="geolocate" /> 
 
<input id="street" value="" /> 
 
<input id="city" value="Saltzburg" /> 
 
<br/> 
 
<input id="zip" value="" /> 
 
<br/> 
 
<input id="lat" /> 
 
<input id="lng" /> 
 

 
<div id="map"></div>

Answer 2

我創建了拖動一個新的標誌/點擊：

myListener = google.maps.event.addListener(map, 'click', function (event) { 
     placeMarker(event.latLng); 
    }); 
function placeMarker(location) { 
    if (marker) { 
     marker.setPosition(location); 
    } else { 
     marker = new google.maps.Marker({ 
      position: location, 
      map: map, 
      draggable: true 
     }); 
     google.maps.event.addListener(marker, "dragend", function (mEvent) { 
      saveLocation(mEvent.latLng); 
     }); 
    } 
    saveLocation(marker.getPosition()); 
} 
function saveLocation(pos) { 
    $("#hfLatitude").val(pos.lat()); 
    $("#hfLogitude").val(pos.lng()); 
}