0

2 つのマーカー (各マップに 1 つのマーカー) を使用して、2 つのマップを作成しようとしています。

マーカーをドラッグすると、その位置がページの 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+'>';
    }       
}
4

1 に答える 1

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);});
于 2013-11-01T22:07:27.693 に答える