用XML填充GoogleMap

Question

我为我的Map Points创建了一个自定义的XML结构。该结构看起来像下面的代码。我想读取点并将它们放在地图上，点击时有一个弹出窗口和一个特定的标记图标。我将不胜感激任何帮助。

MapPoints.xml

<MapPoints> 
<MapPoint PointID="1"> 
    <LocationName></LocationName> 
    <LocationAddress></LocationAddress> 
    <LocationURL></LocationURL> 
    <LocationExt></LocationExt> 
    <LocationFax></LocationFax> 
    <LocationLat></LocationLat> 
    <LocationLong></LocationLong> 
    <LocationMarker></LocationMarker> 
</MapPoint> 
<MapPoint PointID="2"> 
    <LocationName></LocationName> 
    <LocationAddress></LocationAddress> 
    <LocationURL></LocationURL> 
    <LocationExt></LocationExt> 
    <LocationFax></LocationFax> 
    <LocationLat></LocationLat> 
    <LocationLong></LocationLong> 
    <LocationMarker></LocationMarker> 
</MapPoint> 
<MapPoint PointID="3"> 
    <LocationName></LocationName> 
    <LocationAddress></LocationAddress> 
    <LocationURL></LocationURL> 
    <LocationExt></LocationExt> 
    <LocationFax></LocationFax> 
    <LocationLat></LocationLat> 
    <LocationLong></LocationLong> 
    <LocationMarker></LocationMarker> 
</MapPoint> 
<MapPoint PointID="4"> 
    <LocationName></LocationName> 
    <LocationAddress></LocationAddress> 
    <LocationURL></LocationURL> 
    <LocationExt></LocationExt> 
    <LocationFax></LocationFax> 
    <LocationLat></LocationLat> 
    <LocationLong></LocationLong> 
    <LocationMarker></LocationMarker> 
</MapPoint> 
</MapPoints> 

Answer 1

有很多的例子格式使用属性，here is one是分析在 “迈克·威廉姆斯谷歌地图API第2版教程” XML。

要使用 “自定义” 的格式，你将需要更换这行（找人 “的MapPoint”，而不是 “标志”）：

var markers = xmlDoc.documentElement.getElementsByTagName("marker"); 

和这些行：

 var lat = parseFloat(markers[i].getAttribute("lat")); 
     var lng = parseFloat(markers[i].getAttribute("lng")); 
     var point = new google.maps.LatLng(lat,lng); 
     var html = markers[i].getAttribute("html"); 
     var label = markers[i].getAttribute("label"); 
     // create the marker 
     var marker = createMarker(point,label,html); 

使用从xml分析元素内容的代码。

要获得元素的内容，你需要做这样的事情：

var lat = parseFloat(nodeValue(markers[i].getElementsByTagName("LocationLat")[0])); 

其中的nodeValue（从geoxml3借来的）是：

//nodeValue: Extract the text value of a DOM node, with leading and trailing whitespace trimmed 
geoXML3.nodeValue = function(node) { 
    var retStr=""; 
    if (!node) { 
    return ''; 
    } 
    if(node.nodeType==3||node.nodeType==4||node.nodeType==2){ 
     retStr+=node.nodeValue; 
    }else if(node.nodeType==1||node.nodeType==9||node.nodeType==11){ 
     for(var i=0;i<node.childNodes.length;++i){ 
     retStr+=arguments.callee(node.childNodes[i]); 
     } 
    } 
    return retStr; 
}; 

Answer 2

使用jquery。在你的html文档的头部，放上这一行：

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script> 

现在使用jQuery ajax调用本地XML文件。

 //pulls in the xml 
     $.ajax({ 
     type: "GET", 
      url: "MapPoints.xml", 
      dataType: "xml", 
      success: function(xml) { 
       $(xml).find('MapPoint').each(function(){ 
        var lat = $.trim(this.LocationLat); 
        var lng = $.trim(this.LocationLng); 

        //use the same method to extract your other data 
        var mappoint = new google.maps.LatLng(lng,lat); 

        //now create the marker and set it to your map 
        var marker = new google.maps.Marker({ 
        position:mappoint, 
        map:map, 
        title:'Your Marker Title', 
        icon:null 
        }); 

       }); 

      } 
      });