2012-08-14 94 views
0

我爲我的Map Points創建了一個自定義的XML結構。該結構看起來像下面的代碼。我想讀取點並將它們放在地圖上,點擊時有一個彈出窗口和一個特定的標記圖標。我將不勝感激任何幫助。用XML填充GoogleMap

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> 

回答

0

有很多的例子格式使用屬性,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; 
}; 
0

使用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 
        }); 

       }); 

      } 
      });