javascript – Lat,Lng在我拖动标记时不会更新

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了javascript – Lat,Lng在我拖动标记时不会更新，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含3182字，纯文字阅读大概需要5分钟。

内容图文

实际上,我有一个带有可拖动标记的地图.这工作正常,但我无法更新拖动标记的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>

如果有人可以帮助我,我会很高兴的.

解决方法:

您需要获取标记的位置并在拖动标记时更新表单字段：

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 – Lat,Lng在我拖动标记时不会更新全部内容，希望文章能够帮你解决javascript – Lat,Lng在我拖动标记时不会更新所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端