如何把在线地图Google Maps API整合到网站中去？

四、加入多个标记并分组

我们可以标记多个地点，并可以把它们根据我们的需要分组。这样一来，我们可以通过不同的标记图标来显示地点的不同属性，比如：酒店，车站等。要做到这样，我们只需要使用一个XML文件，一个简单的XML文件如下所示：

<markers> 
<marker
     name="标题"
     label="这是一个标签"
     desc="气球提示的描述"
     lat="37.97167" lng="23.72581"
     type="标签的种类，如 Bridge"
     address="地址信息"
     icona="图标"
 /> 
</markers> 

你可以在这个XML文件中加入多个地点信息。有一件事你需要小心的是，当出现一一些特定字符时（比如单引号，双引号，“#@$<>”等），你需要使用HTML的转义。

使用这XML的脚本如下：

<script src="http://gmaps-utility-library.googlecode.com/svn/trunk/labeledmarker/release/src/labeledmarker.js" type="text/javascript"></script>

当然，你需要设置一些参数：

var iconRed = new GIcon(); 
 iconRed.image = '../img/marker-red.png'; 
 iconRed.shadow = ''; 
 iconRed.iconSize = new GSize(32, 32); 
 iconRed.shadowSize = new GSize(22, 20); 
 iconRed.iconAnchor = new GPoint(16, 16); 
 iconRed.infoWindowAnchor = new GPoint(5, 1); 
 var customIcons = [];     

 customIcons["ancient"] = iconRed; 
 var markerGroups = { "ancient": []};

上面，我们给customIcons 的“ancient”属性设置成了iconRed ，于是我们应该在我们的XML文件中使用类型(ancient) ，如果我们把这个XML文件命名为： markers.xml，那么，我们的代码如下：

GDownloadUrl("markers.xml", function(data) { //We tell Google Maps to load our file 
         var xml = GXml.parse(data); 
         var markers = xml.documentElement.getElementsByTagName("marker"); //and read markers 
         for (var i = 0; i < markers.length; i++) { 
             var name = markers[i].getAttribute("name"); //From here down we assign variables. 
             var label = markers[i].getAttribute("label"); 
             var desc = markers[i].getAttribute("desc"); 
             var address = markers[i].getAttribute("address"); 
             var type = markers[i].getAttribute("type"); 
             var icona = markers[i].getAttribute("icona"); 
             var point = new GlatLng(parseFloat(markers[i].getAttribute("lat")), //and we set the lat-long 
             parseFloat(markers[i].getAttribute("lng"))); 
             var marker = createMarker(point, name, label, desc, address, type, icona); 
             map.addOverlay(marker); 
         } 
     }); 
 } 
 }  

 function createMarker(point, name, label, desc, address, type, icona) { 
     var marker = new LabeledMarker(point, {icon: customIcons[type], labelText: label, labelOffset: new GSize(-6, -8)}) 
 }; 

要分组标记，你需要下面的代码：

markerGroups[type].push(marker); 
     var html = "<img src=" + icona + " height=150 border=0 /><br><br><span><b>"+ name + "</b><br/>" + 
             desc + "<br/><b>Address:</b> " + address + "<br/><br/><span>"; 
     GEvent.addListener(marker, 'click', function() { 
         marker.openInfoWindowHtml(html); 
     }); 
     return marker; 
} 

要使用不同的图标，你可以使用相同的方法。

var iconRed = new GIcon(); 
 iconRed.image = '../img/marker-red.png'; 
 iconRed.shadow = ''; 
 iconRed.iconSize = new GSize(32, 32); 
 iconRed.shadowSize = new GSize(22, 20); 
 iconRed.iconAnchor = new GPoint(16, 16); 
 iconRed.infoWindowAnchor = new GPoint(5, 1); 
   
 var iconGreen = new GIcon(); 
 iconGreen.image = '../img/marker-green.png'; 
 iconGreen.shadow = ''; 
 iconGreen.iconSize = new GSize(32, 32); 
 iconGreen.shadowSize = new GSize(22, 20); 
 iconGreen.iconAnchor = new GPoint(16, 16); 
 iconGreen.infoWindowAnchor = new GPoint(5, 1); 
   
 var iconBrown = new GIcon(); 
 iconBrown.image = '../img/marker-brown.png'; 
 iconBrown.shadow = ''; 
 iconBrown.iconSize = new GSize(32, 32); 
 iconBrown.shadowSize = new GSize(22, 20); 
 iconBrown.iconAnchor = new GPoint(16, 16); 
 iconBrown.infoWindowAnchor = new GPoint(5, 1); 
   
 var customIcons = [];     

 customIcons["hotel"] = iconRed; 
 customIcons["bridge"] = iconGreen; 
 customIcons["hill"] = iconBrown; 
 var markerGroups = { "hotel": [], "bridge": [], "hill": []}; 

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

五、过滤显示标记

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

 document.getElementById("hotelCheckbox").checked = true; 
 document.getElementById("bridgeCheckbox").checked = true; 
 document.getElementById("hillCheckbox").checked = true; 
 document.getElementById("labelsCheckbox").checked = true; 

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

function toggleGroup(type) { 
     for (var i = 0; i < markerGroups[type].length; i++) { 
         var marker = markerGroups[type][i]; 
         if (marker.isHidden()) { 
             marker.show(); 
         } else { 
             marker.hide(); 
         } 
     } 
 } 
   
 function toggleLabels() { 
     var showLabels = document.getElementById("labelsCheckbox").checked; 
     for (groupName in markerGroups) { 
         for (var i = 0; i < markerGroups[groupName].length; i++) { 
             var marker = markerGroups[groupName][i]; 
             marker.setLabelVisibility(showLabels); 
         } 
     } 
 } 
   
 function hideAll() { 
      var boxes = document.getElementsByName("mark"); 
      for(var i = 0; i < boxes.length; i++) { 
           if(boxes[i].checked) { 
             boxes[i].checked = false; 
             switchLayer(false, layers[i].obj); 
             chosen.push(i); 
         } 
     } 
 }     

     function checkChecked() { 
     var boxes = document.getElementsByName("mark"); 
     for(var i = 0; i < boxes.length; i++) { 
         if(boxes[i].checked) return true; 
     } 
     return false; 
 } 

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

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

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