Question

我在这个项目中使用Xampp Apache Server。基本上，项目是使用XMLHttpRequest将CSV转换为XML文档以循环遍历XML文档，为每个位置提取属性（例如：lat，long等等），然后创建一个地图点标记。

以下是代码：

<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>

我有一个演示设置但不知何故，当我尝试运行索引文件时，它不会在地图上显示标记。它会给我这个错误：

未捕获的TypeError：无法读取null
的属性'documentElement'

有人可以帮忙吗？赞赏。

Answer 1

您提到的错误表明“xmlDoc”变量为null，并且您正在尝试访问此null变量的“documentElement”属性。由于该错误，此行后面的javascript代码将无法执行，因此您将无法在地图上看到任何标记。

请确保您能够正确加载xml文件。那应该可以解决你的问题。如果有问题，请告诉我。

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

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

注意：Google Maps JavaScript API第2版于2010年5月19日正式弃用。原始弃用期已从2013年5月19日延长至2013年11月19日。截至此日期，所有请求v2的应用程序都将是提供了一个特殊的，包装版本的v3 API。我们希望API的这个包装版本适用于大多数简单的地图，但我们强烈建议您在此日期之前将代码迁移到Maps JavaScript API的第3版。

XML到谷歌地图标记

1 个答案: