javascript - map 拖尾后如何获取经纬度

Question

<script>
  function initialize() {
    var crosshairShape = {coords:[0,0,0,0],type:'rect'};

    var mapCanvas = document.getElementById('map');
    var mapOptions = {
      center: new google.maps.LatLng(23.634501, -102.552784),
      zoom: 5,
      scrollwheel: false,
      panControl: false,
      zoomControl: true,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    var map = new google.maps.Map(mapCanvas, mapOptions);

    var marker = new google.maps.Marker({
        map: map,
    });

    marker.bindTo('position', map, 'center');
    //marker.bindTo('position', map, 'center');

    map.addListener('dragend', function() {
        var Newlat = position.coords.latitude;
       console.log(Newlat);
      });

  }
  google.maps.event.addDomListener(window, 'load', initialize);
</script>

这是我用来制作在原点带有标记的可拖动 map 的代码。我似乎无法获取标记所在位置的纬度和经度。有人可以帮助我吗？

Answer 1

map dragend event回调函数没有任何参数。在回调函数中，获取map中心(这就是你想要的):

map.addListener('dragend', function() {
  var Newlat = map.getCenter().lat();
  console.log(Newlat);
});

proof of concept fiddle

代码片段:

function initialize() {
  var mapCanvas = document.getElementById('map');
  var mapOptions = {
    center: new google.maps.LatLng(23.634501, -102.552784),
    zoom: 5,
  }
  var map = new google.maps.Map(mapCanvas, mapOptions);

  var marker = new google.maps.Marker({
    map: map,
  });

  marker.bindTo('position', map, 'center');

  map.addListener('dragend', function() {
    var Newlat = map.getCenter().lat();
    console.log(Newlat);
  });

}
google.maps.event.addDomListener(window, 'load', initialize);

html,
body,
#map {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map"></div>