2017-04-07 4 views
0

をロードした後、私はジャバスクリプトについての基本的な何かが欠けていると思います。私はあなたの助けを使うことができました!チェックGoogleマップが

シナリオ:「検索」をクリックすると、Googleマップが読み込まれます。それは負荷として、チェックボックスが(Yelpのと同様に)「マップが移動したときの結果をやり直し」、言うこと表示されます。地図をドラッグまたはズームすると、結果が更新されます。その部分は正常に動作します。

問題:たとえredo()が結果を更新しているので、(真または偽)checkboxの値が時にマップがロードredo()機能によって認識され、それがその後再びそれをチェックしません(そうではありません地図を再読み込みします)。したがって、チェックボックスを切り替えると、「やり直し」機能に気付かれません!

簡体コード:

//HAML 
%input{:type => "checkbox", :id => "followCheck", :name => "followCheck", :onclick => 'handleClick();'} 

//load the map 
function showLocations() { 
    map = new google.maps.Map(document.getElementById("map_canvas"), { 
    bunch of map stuff; 
    map.fitBounds(bounds); 
    redo(); //this is the redo function, see below 
    } 
} 

function handleClick(checkbox) { 
    var chk = document.getElementById("followCheck").checked; 
    console.log("checkbox value is currently " + chk); 
    return chk; 
} 

function redo() { 
    var chk = handleClick(); 
    console.log("inside redo, value is " + chk); 
    if (chk == true) { 
    google.maps.event.addListener(map, 'mouseup', function() { 
     mapAdjusted = 1; 
     updateMapAfterUserInteraction(); 
    }); 
    google.maps.event.addListener(map, 'zoom_changed', function() { 
     mapAdjusted = 1; 
     updateMapAfterUserInteraction(); 
    }); 
    } 
} 

(ノート、そのリドゥ()関数は、私よりも賢く、現在、町の外で私の協力者によって書かれました。)

ので、Redo()ロードマップがロードされたとき。チェックボックスがtrueの場合、マップロードは、その後、redo()機能はzoom/dragを処理するとき。しかし、それはまださえ値をfalseに変更した後にそれをしない(と、ページのロード時に値がfalseの場合、反対が起こります)。

は、値が変更されたことを確認するためにredo()を取得するために何が必要ですか? push()bind()? get/set? change()addEventListener()?チェックボックスがトグルされるとき、私は(私はむしろないと思います)のマップをリロードする必要がありますか?全く新しいアプローチ?私は立ち往生している!ありがとう。私はJQueryのアイディアも公開しています。

答えて

0

私はこれを解決しました。まず、機能を少し調整して、ボックスをチェックした後にオンにすることができました(前のページセッションでボックスのチェックを外している間に結果がロードされても)。ここではそのコードは(私は実際にはすべて同じ結果を持っていた3つのバリエーションのように見つかった)次のとおりです。

function redo() { 
    if ($("#followCheck").is(':checked')) { 
    google.maps.event.addListener(map, 'mouseup', function() { 
     mapAdjusted = 1; 
     updateMapAfterUserInteraction(); 
    }); 
    google.maps.event.addListener(map, 'zoom_changed', function() { 
     mapAdjusted = 1; 
     updateMapAfterUserInteraction(); 
    }); 
    } 
} 

問題は、それはオフにしなかったことでした。それは2人のリスナーを追加したためです。 This answerはリスナーの削除を手伝ってくれました。私にとっては、removeListener()機能がaddListener()機能の中にあるときにのみ機能することに注意してください。奇妙な種類。

function redo() { 
    var listener1 = google.maps.event.addListener(map, 'mouseup', function() { 
    if (!$("#followCheck").is(':checked')) { 
     google.maps.event.removeListener(listener1); 
    } else { 
     mapAdjusted = 1; 
     updateMapAfterUserInteraction(); 
    } 
    }); 
    var listener2 = google.maps.event.addListener(map, 'zoom_changed', function() { 
    if (!$("#followCheck").is(':checked')) { 
     google.maps.event.removeListener(listener2); 
    } else { 
     mapAdjusted = 1; 
     updateMapAfterUserInteraction(); 
    } 
    }); 
} 

ああ、私もonchange()

onclick()を変更しました