Question

我认为我遗漏了一些关于javascript的基本知识。我可以帮你使用！

场景点击“搜索”后，谷歌地图会加载。在加载时，会出现一个复选框，显示“移动地图时重做结果”（类似于yelp）。如果拖动或缩放地图，则结果会更新。那部分工作正常。

问题：地图加载时checkbox（{1}}函数会识别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()。如果加载地图时复选框为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();
    });
  }
}

问题在于它没有关闭。那是因为我增加了两个听众！ 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()

加载Google地图后检查复选框值

1 个答案: