Javascript:通过单击和拖动 map 标记获取坐标

Question

我有下面的脚本，其中单击 map 时会放置谷歌地图标记。然后可以拖动它以获得更高的精度。我想在任何一种情况下获取 map 图钉的坐标。

map.addListener('click', function (e) {
    placeMarkerAndPanTo(e.latLng, map);
});

function placeMarkerAndPanTo(latLng, map) {
    var position = latLng;
    console.log(position);
    while (markersArray.length) {
        markersArray.pop().setMap(null);
    }
    var marker = new google.maps.Marker({
        draggable: true,
        position: latLng,
        map: map,
        title: "Select Your Location!"
    });
    map.panTo(latLng);

    markersArray.push(marker);

    map.addListener(marker, 'dragend', function (event) {
    var position = event.latLng;
    console.log(position);
    });
}

我得到的点击坐标很好，但我在放置我的 'dragend' 监听器以便它接收操作时遇到问题。如果将其放置在 placeMarkerAndPanTo 函数内，那么在函数结束后它并不会真正“监听”。但是，如果我将它放在函数之外，那么它就不知道标记是什么!

解决这个问题最简单的方法是什么？

Answer 1

您的代码中有一个拼写错误:

markersArray.push(marker);

map.addListener(marker, 'dragend', function (event) {
var position = event.latLng;
console.log(position);
});

应该是:

markersArray.push(marker);

google.maps.event.addListener(marker, 'dragend', function (event) {
var position = event.latLng;
console.log(position);
});

proof of concept fiddle

代码片段:

var geocoder;
var map;
var markersArray = [];

function placeMarkerAndPanTo(latLng, map) {
  var position = latLng;
  console.log(position);
  while (markersArray.length) {
    markersArray.pop().setMap(null);
  }
  var marker = new google.maps.Marker({
    draggable: true,
    position: latLng,
    map: map,
    title: "Select Your Location!"
  });
  map.panTo(latLng);

  markersArray.push(marker);

  google.maps.event.addListener(marker, 'dragend', function(event) {
    var position = event.latLng;
    console.log(position);
  });
}

function initialize() {
  var map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(37.4419, -122.1419),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });

  map.addListener('click', function(e) {
    placeMarkerAndPanTo(e.latLng, map);
  });

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

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

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map_canvas" style="border: 2px solid #3872ac;"></div>