使用复选框隐藏/显示基于类别的谷歌地图标记's
Hide/Show Google Maps markers based on category with checkbox's
我已经彻底搜索过了，花了整整两个工作日的时间，到目前为止，我还找不到与我的场景特别匹配的场景。我在这里学习，好了，开始吧。。。
我使用的是谷歌地图api v3。我在地图上有12个酒吧位置（标记）。在地图上方，我有复选框的定义类别，1家酒吧可能适合许多类别。我只想在复选框中显示特定类别中的酒吧，然后隐藏其余的。
我尝试了很多解决方案，但都无济于事，我把它降到了最低限度。谢谢你抽出时间。
实时链接：http://xii.com.au/pubmap
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>
我制作了一个小提琴，演示了如何设置，但概述：将对标记的引用存储在一个数组中，然后当单击复选框时，运行酒吧列表，并根据标记是否匹配来显示或隐藏标记。
关键的一点是在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对象列表，因此您可以根据站点阵列中的信息更改地图上的Marker。
为了过滤内容，你必须在某个地方（可能在sites数组中）列出pub满足的哪些属性可以进行检查。支持按多个属性进行筛选将需要一些额外的检查（当任何复选框更改时，您需要提取所有复选框的值，并根据所有复选框检查每个项目），但本示例应该会让您回到正轨。
其他注意事项：您必须像sites数组一样将markerobj声明为全局变量，这样您就可以从回调中获取它。我建议使用复选框的值来存储它过滤的内容，而不是id——我上面的代码假设复选框的价值就是过滤器。
相关文章：
- 如何更改角度谷歌地图上的集群图标
- 谷歌地图API-显示具有不同图标的标记
- 谷歌地图-更改图层图标大小
- 在地图加载/页面加载时，我想将地图设置为当前地理位置，但不想在地图上显示定位图标
- 将图标作为参数传递不会;t工作-谷歌地图
- 谷歌地图隐藏手图标
- 从谷歌地图信息窗口中删除关闭图标
- 在javascript中设置谷歌地图标记图标属性
- 我是否可以在单击特定图标时更改地图标记图标，然后在单击另一个图标时切换，等等
- 我如何才能在某些条件下更改c#中谷歌地图标记的图标
- 使用HTML元素代替gmap3的地图标记图标
- 谷歌地图标记图标作为变量
- 我如何使谷歌地图不更改标记的自定义图标大小
- 饼图而不是谷歌地图中的标记集群图标
- 如何在谷歌地图上放置图标标记，图标数量是否有配额
- 可拖动图标未显示在 Google 地图顶部且不重复
- 谷歌地图v3更改标记图标在安卓网络视图
- AngularJS谷歌地图(ng-map）图标网址不起作用
- 带有群集和过滤器复选框的地图框个性化图标
- 添加 removeMarker 函数时，每 5 秒在地图上加载一次图钉不会显示图标
