Javascript:通过点击和拖动地图标记获取坐标

Javascript: Get Coords from both clicking and dragging map marker

本文关键字：图标 地图 获取 坐标 拖动 Javascript      更新时间：2023-09-26

我有下面的脚本，其中在单击地图时放置一个google地图标记。然后可以拖动它以进一步精确。无论哪种情况，我都想获得地图引脚的坐标。

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 !

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

你的代码中有一个错别字:

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);
});

概念验证

代码片段:

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>

您可以尝试将var marker移出函数并使用

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