Google Maps API 用法教程(2)

所以，如果我们在XML 文件中设置了不同的种类，如：hotel，bridge 和 hill，我们也应该需要不同的颜色和图标。

过滤显示标记

我们还可以让我们的标记更友好一些。我们可以让用户决定是否显示标记，这样的话，地图上的标记就不会太多，也会根据用户的需求来显示相当的标记。我们可以使用几个按钮，复选框，或是链接来完成这个事情。要做到这个事，你需要在“map.addMapType(G_SATELLITE_3D_MAP); ”后面加入下面的代码：

1.document.getElementById("hotelCheckbox").checked = true; 2.document.getElementById("bridgeCheckbox").checked = true; 3.document.getElementById("hillCheckbox").checked = true; 4.document.getElementById("labelsCheckbox").checked = true;

然后再加入下面的这些 JavaScript 的代码：

01.function toggleGroup(type) { 02. for (var i = 0; i < markerGroups[type].length; i++) { 03. var marker = markerGroups[type][i]; 04. if (marker.isHidden()) { 05. marker.show(); 06. } else { 07. marker.hide(); 08. } 09. } 10.} 11. 12.function toggleLabels() { 13. var showLabels = document.getElementById("labelsCheckbox").checked; 14. for (groupName in markerGroups) { 15. for (var i = 0; i < markerGroups[groupName].length; i++) { 16. var marker = markerGroups[groupName][i]; 17. marker.setLabelVisibility(showLabels); 18. } 19. } 20.} 21. 22.function hideAll() { 23. var boxes = document.getElementsByName("mark"); 24. for(var i = 0; i < boxes.length; i++) { 25. if(boxes[i].checked) { 26. boxes[i].checked = false; 27. switchLayer(false, layers[i].obj); 28. chosen.push(i); 29. } 30. } 31.} 32. 33.function checkChecked() { 34. var boxes = document.getElementsByName("mark"); 35. for(var i = 0; i < boxes.length; i++) { 36. if(boxes[i].checked) return true; 37. } 38. return false; 39.}

最后一件事是加如几个checkbox ：

1.<input type="hidden" id="labelsCheckbox" onclick="toggleLabels()" checked=”checked” /> 2.<label for=”hotelCheckbox”>Hotels</label><input type="checkbox" id="hotelCheckbox" onclick="toggleGroup('hotel')" checked=”checked” /> 3.<label for=”bridgeCheckbox”>Bridges</label><input type="checkbox" id="bridgeCheckbox" onclick="toggleGroup('bridge')" checked=”checked” />

我们 Google Maps 就绪了，这篇文章讲述了Google Map API中你应该知道的。希望这篇文章对你有帮助。