Question

我正在尝试创建两个地图，其中包含两个标记（每个地图上有一个标记）。

在拖动标记时，其位置会在页面的DIV元素中更新。在移动地图时，标记将移动到地图的中心，并再次更新DIV元素。

我创建了各种功能来进行相应的更改。要确定要检查或移动的标记或地图，我会在函数中传递map或marker变量。

但是，地图显示出奇怪的行为。在尝试拖动标记时，它会附加到我的鼠标指针，并且永远不会在地图上删除，也不会触发任何事件。此外，移动地图不会做任何事情。

如果我以

形式为每个标记或地图单独声明该功能

addListener(marker, 'drag', function() { //some code });

它完美无缺。

不确定出了什么问题。

以下是代码段：

//add a listener for the marker movement
google.maps.event.addListener(marker_start, 'drag', handleMarkerDrag(marker_start, 1));
google.maps.event.addListener(marker_end, 'drag', handleMarkerDrag(marker_end, 2));

//add a listener for the map
google.maps.event.addListener(map_start, 'dragend', handleMapDragend(map_start, marker_start, 1));
google.maps.event.addListener(map_end, 'dragend', handleMapDragend(map_end, marker_end, 2));

以及处理事件的函数：

function handleMarkerDrag(marker, x)
{
    //get the current location of the marker
    var marker_pos = marker.getPosition();
    //convert lat-lang datastructure into individual latitude and longitude
    var lat = marker_pos.lat();
    var lng = marker_pos.lng();
    //now update the content in the html page
    if(x == 1)
    {
        document.getElementById("longitude_start").innerHTML = lng+'<input type="hidden" name="longitude_start" value='+lng+'>';
        document.getElementById("latitude_start").innerHTML = lat+'<input type="hidden" name="latitude_start" value='+lat+'>';
    }
    else
    {
        document.getElementById("longitude_end").innerHTML = lng+'<input type="hidden" name="longitude_end" value='+lng+'>';
        document.getElementById("latitude_end").innerHTML = lat+'<input type="hidden" name="latitude_end" value='+lat+'>';
    }   
}

function handleMapDragend(map, marker, x)
{
    //get the current location of the marker
    var marker_pos = map.getCenter();
    //set marker to the enter of the map
    marker.setPosition(marker_pos);
    //convert lat-lang datastructure into individual latitude and longitude
    var lat = marker_pos.lat();
    var lng = marker_pos.lng();
    //now update the content in the html page
    if(x == 1)
    {

        document.getElementById("longitude_start").innerHTML = lng+'<input type="hidden" name="longitude_start" value='+lng+'>';
        document.getElementById("latitude_start").innerHTML = lat+'<input type="hidden" name="latitude_start" value='+lat+'>';
    }
    else
    {
        document.getElementById("longitude_end").innerHTML = lng+'<input type="hidden" name="longitude_end" value='+lng+'>';
        document.getElementById("latitude_end").innerHTML = lat+'<input type="hidden" name="latitude_end" value='+lat+'>';
    }       
}

Answer 1

如果我为表格中的每个标记或地图单独声明该功能，它可以完美地运行。不确定出了什么问题。

不同之处在于第一次尝试提供了一个函数作为参数，但另一次尝试（失败）是一个函数调用（将立即执行）。

将函数调用包装到匿名函数中：

//add a listener for the marker movement
google.maps.event.addListener(marker_start, 'drag', function(){handleMarkerDrag(marker_start, 1);});
google.maps.event.addListener(marker_end, 'drag', function(){handleMarkerDrag(marker_end, 2);});

//add a listener for the map
google.maps.event.addListener(map_start, 'dragend', function(){handleMapDragend(map_start, marker_start, 1);});
google.maps.event.addListener(map_end, 'dragend', function(){handleMapDragend(map_end, marker_end, 2);});

不能为两个侦听器使用相同的功能

1 个答案: