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+'>';
}
}