Lat，Lng不会在我拖动标记时更新 [英] Lat, Lng doesn't update when I drag marker

问题描述

实际上，我有一个可拖动标记的地图。这工作正常，但我不能更新拖动标记的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不会在我拖动标记时更新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！