2017-12-11 13 views
-1

私はJqueryを初めて使っていて、私は理解できない奇妙な動作に直面しています。どんな参考資料も大歓迎です。GoogleマップJQueryの奇妙な振る舞いの関数呼び出しをクリックすると

私はGoogleマップにマーカーを追加しています。マーカーをクリックすると、X座標とY座標を保存して、その位置にボックスをアニメーション表示できます。すべてうまく動作しますが、コンソールと自分のデータログボックスを確認すると、マーカーをクリックするたびにsaveXandY関数が+1回実行されます。以下

コード:

// addmarker on click if markermode is on 
google.maps.event.addListener(map, 'click', function(event){ 
    if (markerMode == true) { 
     addMarker(event.latLng); 
    } 
}); 

function addMarker(location) { 
    var image = { 
     url: defaultMarkerIcon, 
     scaledSize: new google.maps.Size(defaultMarkerSizeX,defaultMarkerSizeY) 
    }; 

    marker = new google.maps.Marker({ 
     position: location, 
     draggable: defaultMarkerDraggable, 
     icon: image, 
     map: map, 
    }); 

    markerMode = false; 
    marker.customInfo = i; 
    logData("Marker custominfo: " + marker.customInfo); 
    markers.push(marker);  
    i++;  

    map.setOptions({ draggableCursor: ''}); 
    addListener(); 
} 

function addListener() {   
    google.maps.event.addListener(marker, 'click', function(evt) {  
     logData("Marker custominfo: " + marker.customInfo); 
     saveXandY();  
    }); 
} 

function saveXandY() { 
    $('#map').click(function(e) { 
     coordsX = e.pageX; 
     coordsY = e.pageY; 
     logData("Set X + Y: " + e.pageX + "," + e.pageY); 
     console.log("SaveXandY") 
    }); 
}; 

// simple log to databox 
function logData(console){ 
    $("#data").prepend(console); 
    $("#data").prepend('<br />'); 
} 

コンソールは次のようになります。

Set X + Y: 708,164 
Set X + Y: 708,164 
Set X + Y: 708,164 
Set X + Y: 708,164 
Set X + Y: 708,164 
Marker custominfo: 0 
Set X + Y: 708,164 
Set X + Y: 708,164 
Set X + Y: 708,164 
Set X + Y: 708,164 
Marker custominfo: 0 
Set X + Y: 712,164 
Set X + Y: 712,164 
Set X + Y: 712,164 
Marker custominfo: 0 
Set X + Y: 712,164 
Set X + Y: 712,164 
Marker custominfo: 0 
Set X + Y: 712,164 

また、マーカーを追加した後には、マップをクリックすると、機能saveXandY内のコードは()も実行されているようです。これは当てはまりません。誰でも提案を得たならば、私は幸せになるだろう

:) オメル

+0

たびに 'saveXandY()'、あなたが以前のもののバインドを解除することなく、#1 map' 'に新しいクリックイベントをバインドしています。 –

答えて

0

は交換してください:これで

$('#map').click(function(e) { 
     coordsX = e.pageX; 
     coordsY = e.pageY; 
     logData("Set X + Y: " + e.pageX + "," + e.pageY); 
     console.log("SaveXandY") 
    }); 

を:

$('#map').off().on("click", function(e) { 
     coordsX = e.pageX; 
     coordsY = e.pageY; 
     logData("Set X + Y: " + e.pageX + "," + e.pageY); 
     console.log("SaveXandY") 
    }); 

現在のリスナーを削除します "OFF" と新しいものを追加してください。可能であれば、saveXandY()を1回だけ呼び出すほうがよいでしょう。

「オフ」の詳細:お電話http://api.jquery.com/off/

+1

ありがとうございましたNicholas私はちょっと混乱しましたが、関数saveXandYが呼び出されるたびに、別のリスナーを追加していることがわかりました:) –