谷歌地圖加載後檢查複選框的值

我認爲我錯過了關於JavaScript的一些基本信息。我可以使用你的幫助！谷歌地圖加載後檢查複選框的值

場景：點擊「搜索」後，谷歌地圖加載。在加載時，會出現一個複選框，提示「地圖移動時重做結果」（類似於yelp）。如果地圖被拖動或縮放，結果會更新。這部分工作正常。

問題：的checkbox（true或false）的值是通過在地圖加載redo()功能的認可，它不後檢查一遍（因爲即使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的想法。

來源

2017-04-07 Ganberry

我解決了這個問題。首先，通過對函數的小調整，我可以在選中框後打開它（即使在通過前一頁會話取消選中框時加載結果）。這裏是代碼（我居然發現像三個變化，所有有同樣的結果）：

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

的問題是，它並沒有關閉。那是因爲我添加了兩個聽衆！ 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(); 
    } 
    }); 
}

哦，我也改變onclick()到onchange()

來源

2017-04-08 07:11:53 Ganberry

谷歌地圖加載後檢查複選框的值

回答

相關問題