2013-07-22 118 views
0

我正在使用Xampp Apache Server这个项目。基本上,该项目将CSV转换为使用XMLHttpRequest循环遍历XML文档的XML文档,为每个位置提取属性(如lat,long等等),然后创建一个地图点标记。XML到Google地图标记

下面是代码:

<html xmlns="http://www.w3.org/1999/xhtml" 
    xmlns:v="urn:schemas-microsoft-com:vml"> 
<head> 
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/> 

    <title>Read XML Files with Google Maps</title> 
    <script src="http://maps.google.com/maps? file=api&amp;v=2&amp;key=ABQIAAAA7_kD1t_m22HBF9feCaDPZxQwcATY4FXmxYwkk9LNWGtAQdNKTBS1kBsTEqrRPg2kWxuNdmf2JVCIkQ" type="text/javascript"></script> 
<script src="markermanager.js"></script> 

<script> 
    var map; 

    function initialize() { 
    if (GBrowserIsCompatible()) { 
    map = new GMap2(document.getElementById("map_canvas")); 
    map.setCenter(new GLatLng(30.279, -97.700), 13); 
    map.addControl(new GLargeMapControl()); 
    map.addControl(new GMapTypeControl()); 
    map.addMapType(G_PHYSICAL_MAP); 
    map.setMapType(G_PHYSICAL_MAP); 

addMarkersFromXML(); 

    } 

    } 

    function addMarkersFromXML(){ 
    var batch = []; 
    mgr = new MarkerManager(map); 

    var request = GXmlHttp.create(); 
    request.open('GET', 'Landmarks.xml', true); 
    request.onreadystatechange = function() { 
    if (request.readyState == 4 && request.status == 200) { 
    var xmlDoc = request.responseXML; 
    var xmlrows = xmlDoc.documentElement.getElementsByTagName("Row"); 

    for (var i = 0; i < xmlrows.length; i++) { 
    var xmlrow = xmlrows[i]; 

    var xmlcellLongitude = xmlrow.getElementsByTagName("Longitude")[0]; 
    var xmlcellLatitude = xmlrow.getElementsByTagName("Latitude")[0]; 
    var point = new GLatLng(parseFloat(xmlcellLatitude.firstChild.data),  parseFloat(xmlcellLongitude.firstChild.data)); 

    //get the building name 
    var xmlcellBuildingName = xmlrow.getElementsByTagName("Building_Name")[0]; 
    var celltextBuildingName = xmlcellBuildingName.firstChild.data; 

    //get the address 
    var xmlcellAddress = xmlrow.getElementsByTagName("Address")[0]; 
    var celltextAddress = xmlcellAddress.firstChild.data; 

    //get the ownership 
    var xmlcellOwnership = xmlrow.getElementsByTagName("Ownership")[0]; 
    var celltextOwnership = xmlcellOwnership.firstChild.data; 

    //get the date built 
    var xmlcellDateBuilt = xmlrow.getElementsByTagName("Date_Built")[0]; 
    var celltextDateBuilt = xmlcellDateBuilt.firstChild.data; 

    var htmlString = "Building Name: " + celltextBuildingName + "<br>" + "Address: " + celltextAddress + "<br>" + "Ownership: " + celltextOwnership + "<br>" + "Date Built: " + celltextDateBuilt; 
    //var htmlString = 'yes' 
    var marker = createMarker(point,htmlString); 
    batch.push(marker); 

} 

mgr.addMarkers(batch,13); 
mgr.refresh(); 

    } 
    } 
request.send(null); 

    } 

    function createMarker(point,html) { 
     var marker = new GMarker(point); 
     GEvent.addListener(marker, "click", function() { 
     marker.openInfoWindowHtml(html); 
     }); 
     return marker; 
} 

    </script> 
</head> 
<body onload="initialize()" onunload="GUnload()"> 
    <div id="map_canvas" style="width: 1350px; height: 800px"></div> 
    <div id="message"></div> 
</body> 
</html> 

和XML文件:

<?xml version="1.0" encoding="UTF-8" standalone="yes"?> 
    <Root xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"> 
<Row> 
      <Longitude>-97.772588</Longitude> 
      <Latitude>30.249405</Latitude> 
     <Building_Name>GOODRICH BAPTIST CHURCH AND CEMETERY</Building_Name> 
    <Address>2107 Goodrich Avenue</Address> 
    <Ownership>NON-PROFIT</Ownership> 
    <Date_Built>1860</Date_Built> 
</Row> 
<Row> 
    <Longitude>-97.744671</Longitude> 
    <Latitude>30.266270</Latitude> 
    <Building_Name>DAVIS (NELSON) WAREHOUSE</Building_Name> 
    <Address>107 West 4th Street</Address> 
    <Ownership>PRIVATE</Ownership> 
    <Date_Built>1905</Date_Built> 
</Row> 
</Root> 

我有一个演示安装,但不知何故,当我尝试运行索引文件它不会显示上的标记map.It会给我这个错误:

Uncaught TypeError: Cannot read property 'documentElement' of null

任何人都可以请帮忙。赞赏。

回答

0

您提到的错误表明“xmlDoc”变量为空,并且您试图访问此空变量的“documentElement”属性。 由于错误,此行后面的JavaScript代码将不会执行,因此您不会在地图上看到任何标记。

请确保您能够正确加载xml文件。这应该可以解决你的问题。请让我知道它是否成功。

我还想建议您切换到Google地图v3,因为您在示例中使用的Google地图v2代码已被弃用,如下面的链接所述。

https://developers.google.com/maps/documentation/javascript/v2/

Note: The Google Maps JavaScript API Version 2 was officially deprecated on May 19, 2010. The original deprecation period has been extended from May 19, 2013 until November 19, 2013. As of this date, all applications requesting v2 will be served a special, wrapped version of the v3 API instead. We expect this wrapped version of the API will work for most simple maps, but we strongly encourage you to migrate your code to version 3 of the Maps JavaScript API before this date.