我已经彻底搜索过，并且花了整整两个工作日，到目前为止我找不到一个与我特别匹配的场景。我在这里学习，好吧，这里......
我正在使用谷歌地图api v3。我在地图上有12个酒吧位置（标记）。在地图上方，我有复选框的定义类别，1个酒吧可能适合众多类别。我想在复选框点击时仅显示特定类别中的酒吧并隐藏剩余的。
我已经尝试了无数的解决方案，但是我已经把它剥离到新眼睛的最低限度。谢谢你的时间。
使用Javascript：
var infowindow = null;
$(document).ready(function () { initialize(); });
function initialize() {
var centerMap = new google.maps.LatLng(-37.854000, 144.900432);
var myOptions = {
zoom: 14,
minZoom: 12,
maxZoom: 20,
center: centerMap,
mapTypeId: google.maps.MapTypeId.ROADMAP,
styles:[{
featureType:"poi",
elementType:"labels",
stylers:[{
visibility:"off" /* Hide POI */
}]
}]
}
var map = new google.maps.Map(document.getElementById("googlemap"), myOptions);
setMarkers(map, sites);
google.maps.event.addDomListener(window, "resize", function() {
var center = map.getCenter();
google.maps.event.trigger(map, "resize");
map.setCenter(center);
});
infowindow = new google.maps.InfoWindow({
content: "loading..."
});
}
var sites = [
['Customs House Hotel', -37.86314,144.904012, 9, '<a class="orange" href="#">Customs House Hotel</a><p>Williamstown</p><p><img src="img/stars_25.png" /></p>'],
['Juntions Beer Hall & Wine Bar', -37.843199,144.883992, 1, '<a class="orange" href="#">Juntions Beer Hall & Wine Bar</a><p>Newport</p><p><img src="img/stars_45.png" /></p>'],
['Morning Star Hotel', -37.86426,144.899121, 11, '<a class="orange" href="#">Morning Star Hotel</a><p>Williamstown</p><p><img src="img/stars_35.png" /></p>'],
['Pirates Tavern', -37.862818,144.907381, 8, '<a class="orange" href="#">Pirates Tavern</a><p>Williamstown</p><p><img src="img/stars_3.png" /></p>'],
['Prince Albert Hotel', -37.853337,144.896165, 2, '<a class="orange" href="#">Prince Albert Hotel</a><p>Williamstown</p><p><img src="img/stars_4.png" /></p>'],
['Rifle Club Hotel', -37.858244,144.888843, 4, '<a class="orange" href="#">Rifle Club Hotel</a><p>Williamstown</p><p><img src="img/stars_25.png" /></p>'],
['Rose of Australia Hotel', -37.85892,144.899105, 6, '<a class="orange" href="#">Rose of Australia Hotel</a><p>Williamstown</p><p><img src="img/stars_3.png" /></p>'],
['Stags Head Hotel', -37.8661,144.906562, 12, '<a class="orange" href="#">Stags Head Hotel</a><p>Williamstown</p><p><img src="img/stars_35.png" /></p>'],
['Steam Packet Hotel', -37.863519,144.90268, 10, '<a class="orange" href="#">Steam Packet Hotel</a><p>Williamstown</p><p><img src="img/stars_4.png" /></p>'],
['Victoria Inn', -37.85676,144.897547, 3, '<a class="orange" href="#">Victoria Inn</a><p>Williamstown</p><p><img src="img/stars_25.png" /></p>'],
['Williamstown RSL', -37.858342,144.894213, 5, '<a class="orange" href="#">Williamstown RSL</a><p>Williamstown</p><p><img src="img/stars_3.png" /></p>'],
['Yacht Club Hotel', -37.862191,144.902608, 7, '<a class="orange" href="#">Yacht Club Hotel</a><p>Williamstown</p><p><img src="img/stars_3.png" /></p>']
];
function setMarkers(map, markers) {
var image = {
url: 'img/pin.png',
size: new google.maps.Size(33, 41),
origin: new google.maps.Point(0,0),
anchor: new google.maps.Point(16, 41),
};
for (var i = 0; i < markers.length; i++) {
var sites = markers[i];
var siteLatLng = new google.maps.LatLng(sites[1], sites[2]);
var marker = new google.maps.Marker({
position: siteLatLng,
map: map,
icon: image,
title: sites[0],
zIndex: sites[3],
html: sites[4],
});
var contentString = "";
google.maps.event.addListener(marker, "click", function () {
infowindow.setContent(this.html);
infowindow.open(map, this);
});
}
}
google.maps.event.addDomListener(window, 'load', initialize);
HTML
<h1>Pubs</h1>
<div class="subhead">
<div class="tags">
<ul>
<li class="current"><label><input type="checkbox" name="filter" id="all"> All </label></li>
<li><label><input type="checkbox" name="filter" id="craft-beer"> Craft Beer </label></li>
<li><label><input type="checkbox" name="filter" id="beer-garden"> Beer Garden </label></li>
<li><label><input type="checkbox" name="filter" id="night-club"> Night Club </label></li>
<li><label><input type="checkbox" name="filter" id="quiz-night"> Quiz Night </label></li>
<li><label><input type="checkbox" name="filter" id="steak-night"> Steak Night </label></li>
<li><label><input type="checkbox" name="filter" id="parma-night"> Parma Night </label></li>
<li><label><input type="checkbox" name="filter" id="tab"> TAB </label></li>
<li><label><input type="checkbox" name="filter" id="live-sport"> Live Sport </label></li>
<li><label><input type="checkbox" name="filter" id="live-music"> Live Music</label></li>
</ul>
</div>
</div>
</header>
<div id="googlemap"></div>
答案 0 :(得分：1)
我把a fiddle放在一起演示如何设置它，但概述：在数组中存储对标记的引用，然后在单击复选框时，浏览您的pubs列表并显示或隐藏标记取决于它们是否匹配。
关键位在for循环中，您可以在其中创建阵列。这是一个可以设置的修改版本：
markerobj = [];
for (var i = 0; i < markers.length; i++) {
var sites = markers[i];
var siteLatLng = new google.maps.LatLng(sites[1], sites[2]);
markerobj[i] = new google.maps.Marker({
position: siteLatLng,
map: map,
icon: image,
title: sites[0],
zIndex: sites[3],
html: sites[4],
});
var contentString = "";
google.maps.event.addListener(markerobj[i], "click", function () {
infowindow.setContent(this.html);
infowindow.open(map, this);
});
}
然后在更改复选框时过滤它们的处理程序：
$('.tags').on('change', 'input[type="checkbox"]', function () {
filter = $(this).val();
for (i = 0; i < sites.length; i++) {
//Test to see if the entry matches, for now we'll just make it random to illustrate the concept
//e.g. if(filter in sites[i].attrs)
if(Math.random() < 0.5) {
markerobj[i].setVisible(true);
} else {
markerobj[i].setVisible(false);
}
}
});
该代码将随机选择要显示的大约一半标记，只是为了证明它确实隐藏和显示事物。您必须在其中放置一些实际逻辑来代替Math.random（），可能会针对该标记的条目中的某些内容检查过滤器。重要的是，现在您有一个映射到与您的站点相同的索引的Marker对象列表，因此您可以根据sites阵列中的信息更改地图上的Markers。
为了过滤某些地方（可能在网站数组中），你必须列出你可以检查的酒吧履行的属性。支持多个属性的过滤将需要一些额外的检查（当任何复选框被更改时，您需要提取所有复选框的值并针对所有复选框检查每个项目），但此示例应该让您回到正轨。 / p>
其他说明：您必须将markerobj声明为sites数组之类的全局变量，以便您可以从回调中获取它。我建议使用复选框的值来存储它的过滤内容，而不是id - 我上面的代码假定复选框的值是过滤器。