本文介绍了Lat,Lng不会在我拖动标记时更新的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
实际上,我有一个可拖动标记的地图。这工作正常,但我不能更新拖动标记的lat和lng。我已经尝试了几个不同的事件监听器,但它们都不起作用。现在我想知道是否有人可以帮助我?我的代码(我删除了您不会感到困惑的脚本):
< script>
函数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);
});
函数geocodeAddress(geocoder,resultsMap){
var address = document.getElementById('street')。value +''+
document.getElementById( 'zip')。value +''+
document.getElementById('city')。value;
geocoder.geocode({$ b $'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('由于以下原因,地理编码失败:'+ status);
}
});
}
< / script>
如果有人能够帮助我,我会很高兴。
解决方案
您需要获取标记的位置并在拖动标记时更新表单域:
google.maps.event.addListener(marker,'dragend',function(evt){
document.getElementById('lat') .value = this.getPosition()。lat();
document.getElementById('lng')。value = this.getPosition()。lng();
});
程式码片段:
html,body,#map {width:100%; height:100%;}< script src = https://maps.googleapis.com/maps/api/js\"></script><input type =buttonid =geolocatevalue =geolocate/>< input id =街道value =/>< input id =cityvalue =Saltzburg/>< br />< input id =zipvalue =/>< >< input id =lat/>< input id =lng/>< div id =map>< / div>
Actually, I have a map with a dragable marker. That works fine, but I can't update lat and lng of the dragged marker. I've tried it with a few different Event listeners, but non of them work. Now I'd like to know if somebody can help me?
My Code (I removed the scripts that you don't get confused):
<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>
I would be glad if somebody could help me out.
解决方案
You need to get the position of the marker and update the form fields when the marker is dragged:
google.maps.event.addListener(marker,'dragend', function(evt) { document.getElementById('lat').value = this.getPosition().lat(); document.getElementById('lng').value = this.getPosition().lng(); });
code snippet:
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>
这篇关于Lat,Lng不会在我拖动标记时更新的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!