解决方法
有多种方法可以解决这个问题,但是让我向你展示一种方法.
首先,我们从一系列位置开始(从Google Maps API Tutorials借来)：
var beaches = [ ['Bondi Beach',-33.890542,151.274856,1],['Coogee Beach',-33.923036,151.259052,['Cronulla Beach',-34.028249,151.157507,2],['Manly Beach',-33.800101,151.287478,['Maroubra Beach',-33.950198,151.259302,2] ];
这实际上是一个数组.它代表5个澳大利亚海滩,我们有名称,纬度,经度和类别.在这种情况下,类别只是为了简单起见.
那么重要的是我们保留对我们创建的标记的引用.为此,我们可以使用存储每个新标记的标记数组,并且我们还可以使用其类别ID来扩充每个标记对象：
var markers = [];
var i,newMarker;
for (i = 0; i < beaches.length; i++) {
newMarker = new google.maps.Marker({
position: new google.maps.LatLng(beaches[i][1],beaches[i][2]),map: map,title: beaches[i][0]
});
newMarker.category = beaches[i][3];
newMarker.setVisible(false);
markers.push(newMarker);
}
最后,当我们需要显示标记时,我们可以简单地迭代标记数组,并根据我们想要显示的类别调用setVisible()方法.
您可能需要查看以下完整示例：
<!DOCTYPE html> <html> <head> <Meta http-equiv="content-type" content="text/html; charset=UTF-8"/> <title>Google Maps JavaScript API v3 Example: Marker Categories</title> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> </head> <body> <div id="map" style="width: 400px; height: 300px;"></div> <input type="button" value="Show Group 1" onclick="displayMarkers(1);"> <input type="button" value="Show Group 2" onclick="displayMarkers(2);"> <script type="text/javascript"> var beaches = [ ['Bondi Beach',2] ]; var map = new google.maps.Map(document.getElementById('map'),{ zoom: 10,center: new google.maps.LatLng(-33.88,151.28),mapTypeId: google.maps.MapTypeId.ROADMAP }); var markers = []; var i,newMarker; for (i = 0; i < beaches.length; i++) { newMarker = new google.maps.Marker({ position: new google.maps.LatLng(beaches[i][1],title: beaches[i][0] }); newMarker.category = beaches[i][3]; newMarker.setVisible(false); markers.push(newMarker); } 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); } } } </script> </body> </html>
从上面的例子的屏幕截图,点击“显示组2”按钮后：