0

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

下面是代码：

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

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

未捕获的类型错误：无法读取 null 的属性“documentElement”

谁能帮忙。赞赏。

4

1 回答 1

0

您提到的错误表明“xmlDoc”变量为空，并且您正在尝试访问此空变量的“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 版。

于 2013-07-22T06:04:02.743 回答