Javascript：通过单击和拖动地图标记获取坐标

Question

我有以下脚本，点击地图时会在其中放置一个谷歌地图标记。然后可以拖动它以获得进一步的精度。无论哪种情况，我都想获取地图图钉的坐标。

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 函数中，那么函数结束后它就不会真正“监听”。但是，如果我将它放在函数之外，那么它不知道 marker 是什么！

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

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

代码 sn-p：

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>

Answer 2

您可以尝试将 var marker 移到函数之外，然后使用

marker = new google.maps.Marker({
    draggable: true,
    position: latLng,
    map: map,
    title: "Select Your Location!"
});

然后将监听器移到函数之外。