加载Google Map后检查复选框的值

Question

我想我缺少有关javascript的基本知识。 我可以帮你！

场景：点击“搜索”后，谷歌地图加载。 加载时，会出现一个复选框，显示“移动地图时重做结果”（类似于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（）函数是由我的协作者编写的，他比我更聪明，并且目前不在城里。）

因此，在地图加载时Redo()会加载。 如果加载地图时复选框为true，则redo()函数将处理zoom/drag 。 但是即使将值更改为false后，它仍然会执行此操作（如果在页面加载时该值为false，则会发生相反的情况）。

要使redo()看到值已更改，需要什么？ push()吗？ bind()吗？ get / set方法？ 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();
    });
  }
}

问题是它没有关闭。 那是因为我添加了两个侦听器！ 这个答案帮助我删除了听众。 请注意（对我而言），仅当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()