【发布时间】：2014-09-10 15:14:46
【问题描述】：
我正在创建一个可以向用户显示标记组的 Google 地图。说出一个地区的所有餐馆或公园。目前，我已经能够创建一组餐厅和一组公园，每个都有自己的标记颜色。我什至可以通过单击地图下方的文本来隐藏或显示所有标记。但现在我想将标记分成几类，以便我可以根据复选框隐藏或显示它们。代码如下，但这里是我想做的事情：
- 默认情况下地图应该是空白的，没有标记
- 我可以将标记分成各自的类别并隐藏和显示每个类别
- 一次可以显示多个类别
这是我的代码
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Google Maps Multiple Markers</title>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script></script>
</head>
<body>
<div id="map" style="width: 100%; height: 650px;"></div>
<p><a onClick="clearMarkers();">Clear Markers</a></p>
<p><a onClick="showRestaurants();">Show Markers</a></p>
<script type="text/javascript">
//Restaurants Markers
var restaurants = [
['Melt Bar and Grill', 41.485345, -81.799047],
['Sloane Pub', 41.486182, -81.824178],
['Spitfire Salon', 41.479670, -81.768430],
['Mahall\'s', 41.476989, -81.781094],
['Szechwan Garden', 41.485615, -81.787890]
];
//Parks Markers
var parks = [
['Lakewood Park', 41.494457, -81.797605],
['Madison Park', 41.476969, -81.781929],
['Tuland Park', 41.464052, -81.788041]
];
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 14,
center: new google.maps.LatLng(41.485345, -81.799047),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow();
var marker, i;
var markers = new Array();
//Create and Place Restaurant Markers
for (i = 0; i < restaurants.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(restaurants[i][1], restaurants[i][2]),
map: map,
icon: 'images/markers/red_Marker.png'
});
markers.push(marker);
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(restaurants[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
//Create and Place Parks Markers
for (i = 0; i < parks.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(parks[i][1], parks[i][2]),
map: map,
icon: 'images/markers/blue_Marker.png'
});
markers.push(marker);
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(parks[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
// Sets the map on all markers in the array.
function setAllMap(map) {
for (var i = 0; i < markers.length; i++) {
markers[i].setMap(map);
}
}
// Removes the markers from the map, but keeps them in the array.
function clearMarkers() {
setAllMap(null);
}
// Shows any markers currently in the array.
function showRestaurants() {
setAllMap(map);
}
</script>
</body>
</html>
【问题讨论】：
-
在您的“要求”列表中，什么是有效的？什么不工作？ fiddle of the posted code
-
3 号目前正在工作。我可以展示公园和餐厅。我希望他们在被触发之前默认不在那里，但我也不知道如何单独隐藏和显示它们。目前对我来说，要么全有，要么全无。
标签： jquery google-maps google-maps-api-3