实际上,我有一张带有可拖动标记的 map 。这工作正常,但我无法更新拖动标记的纬度和经度。我已经尝试过使用几个不同的事件监听器,但它们都不起作用。现在我想知道是否有人可以帮助我?
我的代码(我删除了您不会混淆的脚本):
<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>
如果有人能帮助我,我会很高兴。
最佳答案
您需要获取标记的位置并在拖动标记时更新表单字段:
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>
关于javascript - 当我拖动标记时,纬度、经度不更新,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33480496/