通过类别

Question

Stackers的好日子，

我有一个关于我的困境here的实例。

这是一个老问题，所以我道歉。我正在努力，因为其他示例将地图位置存储在一个简单的数组中，而我的存储在一个对象中。我正在处理来自here的其他人的代码。

我确定我的代码是混乱的，但我设法从键中获取相关值，但是当我应用谷歌地图javascript函数或其他方法时，它们似乎无法正常工作。即使它正在听标记。

非常感谢任何帮助！

以下是我正在努力解决的代码的摘录：

document.getElementById('type').addEventListener("change", function() {
  for (var i=0; i<markers.length; i++) {
    marker = gmarkers1[i];
    console.log(markers[i]);
    for (var key in markers[i]) {
      console.log(markers[i].category);
      if (markers[i].category == data || data.length === 0) {
        console.log(data);
        marker.setVisible(false);
      } else {
        console.log(data);
        marker.setVisible(false);
      }
    }
  }
});

Answer 1

另一种方法是删除所有标记，只重新创建具有所需类别的标记。

首先，我创建了一个标记markersExist，以检查是否存在标记并将其删除。

var markersExist = false; //flag to clear markers already on the map    
document.getElementById('type').addEventListener("change", function() {

  var filter = document.getElementById('type').value;

  //removes all Markers from map first.
  if(markersExist == true){
     for (var i = 0; i < gmarkers1.length; i++) {
      gmarkers1[i].setMap(null);
    }
    gmarkers1 = [];
  }

我修改了循环以检查markers.category并创建它们，如果它们与类别filter一致。

for (var i=0; i<markers.length; i++) {
    if(filter == markers[i].category){
      var data = markers[i];
      var myLatlng = new google.maps.LatLng(data.lat, data.lng);
      var marker = new google.maps.Marker({
        position: myLatlng,
        map: map,
        title: data.title,
        icon: icons[data.type].icon,
        category: category
      });

       gmarkers1.push(marker);

      (function (marker, data) {
        google.maps.event.addListener(marker, "click", function (e) {
          infoWindow.setContent("<div style = 'width:200px;min-height:40px'>" + data.description + "</div>");
          infoWindow.open(map, marker);
        });

      });

      markersExist = true;
    }

我在此jsfiddle中修改了您的代码。