Невозможно использовать одну и ту же функцию для двух слушателей

Question

Я пытаюсь создать две карты с двумя маркерами (по одному маркеру на каждой карте).

При перетаскивании маркера его положение обновляется в элементе DIV на странице. А при перемещении карты маркер перемещается в центр карты, а элемент DIV снова обновляется.

Я создал функции для внесения соответствующих изменений. Чтобы определить, какой маркер или карта нужно проверить или перенести, я передаю переменную карты или маркера в функции.

Однако карта показывает странное поведение. При попытке перетащить маркер он привязывается к указателю мыши и никогда не отбрасывается на карту, и никакое событие не запускается. Кроме того, перемещение карты не делает ничего.

Если я объявляю функцию отдельно для каждого маркера на карте или в виде

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