javascript - 使用谷歌地图切换类别标记

Question

我在谷歌地图中显示的标记有多个类别。我的标记来 self 现在使用的虚拟数据:

var locations = [{
                    "Locatie":    "Den Bosch", 
                    "Latitude":   "51.700651", 
                    "Longitude":  "5.309143",
                    "Categorie":  "1"
                    },
                    {
                    "Locatie":    "Tilburg", 
                    "Latitude":   "51.555728", 
                    "Longitude":  "5.063324",
                    "Categorie":  "2"
                    },
                    {
                    "Locatie":    "Breda", 
                    "Latitude":   "51.582190", 
                    "Longitude":  "4.772186",
                    "Categorie":  "2"
                    },
                    {
                    "Locatie":    "Amsterdam", 
                    "Latitude":   "52.361345", 
                    "Longitude":  "4.887543",
                    "Categorie":  "1"
                    },
                    {
                    "Locatie":    "Utrecht", 
                    "Latitude":   "52.076974", 
                    "Longitude":  "5.103149",
                    "Categorie":  "1"
                    },
                    {
                    "Locatie":    "Heerenveen", 
                    "Latitude":   "52.956084", 
                    "Longitude":  "5.918884",
                    "Categorie":  "2"
                    },
                    {
                    "Locatie":    "Willekeurige Locatie", 
                    "Latitude":   "57.956084", 
                    "Longitude":  "8.918884",
                    "Categorie":  "2"
                    }];

如您所见，我保持简单，只创建了两个类别，1 或 2。标记通过以下代码放置在 map 上:

markers = [];

   var i, newMarker;

   for (i = 0; i < locations.length; i++) {
     newMarker = new google.maps.Marker({
       position: new google.maps.LatLng(locations[i].Latitude, locations[i].Longitude),
       map: map,
       title: locations[i].Locatie
     });

     newMarker.category = locations[i].Categorie;
     newMarker.setVisible(true);

     markers.push(newMarker);

     google.maps.event.addListener(newMarker, 'click', (function(newMarker, i) {
        return function() {
          infowindow.setContent(locations[i].Locatie);
          infowindow.open(map, newMarker);
        }
      })(newMarker, i));
   }

这一步也很好用。请注意，当 Google map 加载时，我会显示所有标记，无论它们所在的类别如何。现在我希望用户能够打开和关闭类别中的标记，我有一个在切换按钮时触发的功能被点击:

function displayMarkers(category) {
  var i;

  for (i = 0; i < markers.length; i++) {
    if (markers[i].category === category) {
      markers[i].setVisible(true);
    }
    else {
      markers[i].setVisible(false);
    }
  }
}

现在所做的只是显示属于单击类别的标记，而它应该根据它们是否已经可见来打开或关闭它们。我想我必须检查标记类别是否在 map 上全部可见，然后根据该情况决定是否必须将 setVisible 设置为 true 或对于该特定组，false。我不知道如何用谷歌地图实现这一点。有谁知道我怎样才能实现这一目标？我添加了一些可能与该问题相关的其他代码片段。

处理按钮的 jQuery:

jQuery('.cat-toggle').click(
     function () {
       var category = jQuery(this).attr("title");
       displayMarkers(category);
       jQuery(this).toggleClass("selected");
     }
);

按钮的 HTML:

<a class="cat-toggle" title="1">category 1</a>
<a class="cat-toggle" title="2">category 2</a>

Answer 1

如果我的代码稍微偏离了您的代码，我们深表歉意。但是这个怎么样？

• 创建标记时，您可以向 var 位置添加一个额外的“visible”字段，并将其默认设置为 true位置[i].visible = true;

此外，在标记中我更喜欢将数据保留在 data- 属性中，因此示例:

<a class="cat-toggle" data-cat="1">category 1</a>

您可以这样读取该值:

var cat = $(this).data('cat');

• 然后我的点击事件变成这样:查看代码，$('.cat-toggle').click

<小时/>

这是一些您可以按原样复制/粘贴的代码。(信息窗口在此代码中不起作用；您有额外的代码...)但切换功能有效。

<script src="http://maps.googleapis.com/maps/api/js?libraries=geometry,visualization,drawing,places&sensor=false"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
var locations = [{
  "Locatie":    "Den Bosch", 
  "Latitude":   "51.700651", 
  "Longitude":  "5.309143",
  "Categorie":  "1"
  },
  {
  "Locatie":    "Tilburg", 
  "Latitude":   "51.555728", 
  "Longitude":  "5.063324",
  "Categorie":  "2"
  },
  {
  "Locatie":    "Breda", 
  "Latitude":   "51.582190", 
  "Longitude":  "4.772186",
  "Categorie":  "2"
  },
  {
  "Locatie":    "Amsterdam", 
  "Latitude":   "52.361345", 
  "Longitude":  "4.887543",
  "Categorie":  "1"
  },
  {
  "Locatie":    "Utrecht", 
  "Latitude":   "52.076974", 
  "Longitude":  "5.103149",
  "Categorie":  "1"
  },
  {
  "Locatie":    "Heerenveen", 
  "Latitude":   "52.956084", 
  "Longitude":  "5.918884",
  "Categorie":  "2"
  },
  {
  "Locatie":    "Willekeurige Locatie", 
  "Latitude":   "57.956084", 
  "Longitude":  "8.918884",
  "Categorie":  "2"
}];
</script>
<script>
var markers;
$(document).ready(function() {

  $('.cat-toggle').click(function() {
    var cat = $(this).data('cat');  // reads data-cat="..."
    // toggle
    for (var i=0; i<locations.length; i++) {
      if (locations[i].Categorie == cat) {    // goup by Categorie
        if (locations[i].visible == true) {   // Visible?  turn off
          locations[i].visible = false;
          markers[i].setVisible(false);
        }
        else {                                // invisible?  turn on
          locations[i].visible = true;
          markers[i].setVisible(true);
        }
      }
    }
  });
  initialize();
});

function initialize() {
  var mapOptions = {
      zoom: 8,
      center: new google.maps.LatLng(52, 5.5),
      mapTypeId: google.maps.MapTypeId.TERRAIN
  };
  var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
  markers = [];
  var i, newMarker;
  for (i = 0; i < locations.length; i++) {
    newMarker = new google.maps.Marker({
      position: new google.maps.LatLng(locations[i].Latitude, locations[i].Longitude),
      map: map,
      title: locations[i].Locatie
    });
    // we add a 'visible' flag to the locations data
    locations[i].visible = true;
    newMarker.setVisible(true);
    markers.push(newMarker);
    google.maps.event.addListener(newMarker, 'click', (function(newMarker, i) {
       return function() {
         infowindow.setContent(locations[i].Locatie);
         infowindow.open(map, newMarker);
       }
     })(newMarker, i)
    );
  }
}
</script>
<style>
#map-canvas {
  height:400px;
}
.cat-toggle {
  cursor: pointer;
}
</style>
<a class="cat-toggle" data-cat="1">category 1</a>
<a class="cat-toggle" data-cat="2">category 2</a>
<div id="map-canvas"></div>

布鲁塞尔的格罗滕