Question

我在谷歌地图中显示的标记有多个类别。我来自这个dummydata的标记我现在正在使用：

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.标记用这段代码放在地图上：

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地图加载时，我会显示所有标记，无论它们属于哪个类别。现在我希望用户能够做的是打开和关闭类别中的标记，我有一个功能，当单击切换按钮：

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);
    }
  }
}

现在这样做只显示属于被点击类别的标记，同时应根据它们是否已经可见而打开或关闭它们。我想我必须检查地图上是否已经显示了一类标记，然后根据该标记决定是否必须将setVisible设置为true或{{1}对于那个特定的群体。我不知道如何用谷歌地图实现这一目标。有谁知道我怎么能做到这一点？我添加了一些可能与问题相关的代码。

处理按钮的jQuery：

false

按钮的HTML：

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

Answer 1

很抱歉，如果我偏离了您的代码。但是这个怎么样？

创建标记时，您需要添加一个额外的字段＆＃39;可见＆＃39;到var位置，并将其默认设置为true locations [i] .visible = true;

此外，在标记中我更喜欢将数据保存在data-属性中，例如：

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

您可以这样读取此值：

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

然后我的点击事件就变成了这样：在代码中查看$（＆＃39; .cat-toggle＆＃39;）。点击

以下是您可以按原样复制/粘贴的一些代码。（信息窗口在此代码中不起作用;您有额外的代码...）但切换工作正常。

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

Groeten uit Brussel

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

1 个答案: