如何在地图dragend之后获得lat

时间:2017-01-27 02:29:24

标签: javascript html google-maps marker dragendjs

<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>

这是我用来制作带有原点标记的可拖动地图的代码。我似乎无法获得留下标记的位置的纬度和经度。 有人可以帮帮我吗?

1 个答案:

答案 0 :(得分: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>