Question

我正在使用Google Maps API创建地图，其目的是只能放置1个标记，然后将其拖动到地图上。我需要在每个位置获取标记的坐标，当它第一次放置时，每次都被拖动。

我一直在寻找很多答案，花了很多时间，但是真的没有解决这个问题，这是我的代码：

<!-- Google Maps API -->
<div id="map-canvas"></div>
<script type="text/javascript">
function loadmap() {
    // initialize map
    var marker;
    var map = new google.maps.Map(document.getElementById("map-canvas"), {
        center: new google.maps.LatLng(20, -40),
        zoom: 1,
        mapTypeId: google.maps.MapTypeId.SATELLITE,
        streetViewControl: false
    });
    // This event listener will call addMarker() when the map is clicked.
    map.addListener('click', function(event) {
        placeMarker(event.latLng);
        document.getElementById('displayLat').value = event.latLng.lat();
        document.getElementById('displayLong').value = event.latLng.lng();
    }); 
    map.addListener(marker,'dragend', function(event) {
        document.getElementById('displayLat').value = event.latLng.lat();
        document.getElementById('displayLong').value = event.latLng.lng();
    }); 
    // Adds a marker to the map.
    function placeMarker(location) {
      if ( marker ) {
      }else{
        marker = new google.maps.Marker({
            draggable: true,                
            position: location,
            map: map
        });
      }
    }
}
</script>

脚本只在中途工作，因为每次点击地图时我都会得到坐标（如果已经放置了标记），并且在拖动标记时我没有得到坐标。

我是Javascript中的新手，根据我的理解，我必须在侦听器中放置某种“if”条件，所以如果标记已经放置为不给出“click”动作的坐标，但我不知道我知道如何接近。

提前致谢，

Answer 1

您的代码存在两个问题。首先，解决你的问题。你有

map.addListener(marker,'dragend', function(event) {

但addListener函数只接受2个参数，即事件类型和回调函数。并且您将此侦听器添加到地图中，而不是标记。将其更改为：

marker.addListener('dragend', function(event) {

其次，你有一个事件监听器，当用户点击地图时，你每次都在检查他们是否已经创建了标记，所以你只能创建一次。没关系，你的代码没什么问题。然而，有一种更好的方法。

您可以使用google.maps.event.addListenerOnce函数，该函数只执行一次。因此，使用它可以略微简化代码：

function loadmap() {
    var marker;
    var map = new google.maps.Map(document.getElementById("map-canvas"), {
        center: new google.maps.LatLng(20, -40),
        zoom: 1,
        mapTypeId: google.maps.MapTypeId.SATELLITE,
        streetViewControl: false
    });

    google.maps.event.addListenerOnce(map, 'click', function(event) {
        marker = new google.maps.Marker({
            draggable: true,                
            position: event.latLng,
            map: map
        });

        marker.addListener('dragend', function(event) {
            document.getElementById('displayLat').value = event.latLng.lat();
            document.getElementById('displayLong').value = event.latLng.lng();
        }); 
    }); 
}

我也只想在你创建标记后添加标记的事件监听器。

Google Maps API仅在第一个标记放置中获取坐标

1 个答案: