在Google加载后选中复选框值

Question

我想我缺少一些关于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()函数是由我的合作者编写的，他比我聪明，目前不在城里。)

所以，当映射加载时，Redo()会加载。如果映射加载时复选框为真，则redo()函数将处理zoom/drag。但是，即使在将值更改为false之后(如果页面加载时值为false，则会发生相反的情况)，它仍然会这样做。

要让redo()看到值发生了变化，需要什么？push()？bind()？准备好了？change()？addEventListener()？当复选框被切换时，我是否应该重新加载地图(我不想)？全新的方法？我被卡住了！谢谢。我对JQuery的想法也很开放。

Answer 1

我解决了这个问题。首先，通过对函数的小调整，我能够在选中该框后打开它(即使在通过上一次页面会话未选中该框时加载的结果也是如此)。下面是代码(实际上我发现了三个变体，它们都有相同的结果)：

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