如何在传给Google Maps API的XML数据中添加锚标签并解决加载报错？

嘿，这个问题我之前踩过坑！出现「Cannot read property 'documentElement' of null」的核心原因很明确：你在XML数据里直接写了锚标签（<a>...</a>），这违反了XML的语法规则——XML会把<和>当成标签的开始/结束符号，导致整个XML文档解析失败，前端拿不到有效的XML根节点，自然就报这个错了。

下面给你几个靠谱的解决办法，按从简单到优雅的顺序来：

1. 转义XML中的特殊字符 #

把锚标签里的特殊字符换成XML转义序列，这样XML解析器就不会把它们当成标签来处理：

• < 替换成 <
• > 替换成 >
• " 替换成 "

比如原本的锚标签：

<a href="detail.php?id=123">查看详情</a>

转义后变成：

<a href="detail.php?id=123">查看详情</a>

2. 用CDATA段包裹HTML内容（更推荐） #

如果要插入的HTML内容比较复杂，转义字符会很麻烦，用CDATA段是更省心的选择——XML解析器会把CDATA内部的内容当成纯文本，完全忽略其中的标签语法。

在data.php的XML输出里，把包含锚标签的内容用<![CDATA[ ... ]]>包裹起来：

// data.php里输出XML的示例代码
header("Content-Type: text/xml; charset=utf-8");
echo '<?xml version="1.0" encoding="UTF-8"?>';
echo '<markers>';
// 假设有一个标记的描述带锚标签
echo '<marker lat="39.9042" lng="116.4074" name="北京">';
echo '<info><![CDATA[ 点击<a href="beijing.php">查看北京详情</a> ]]></info>';
echo '</marker>';
echo '</markers>';

3. 前端解析时正确处理内容 #

当你在main.php里读取XML数据时，直接获取CDATA包裹的内容即可，不需要额外处理，Google Maps的信息窗口会自动解析其中的HTML：

// main.php里解析XML并添加标记的示例代码
function downloadUrl(url, callback) {
  var request = window.ActiveXObject ?
      new ActiveXObject('Microsoft.XMLHTTP') :
      new XMLHttpRequest();

  request.onreadystatechange = function() {
    if (request.readyState == 4) {
      request.onreadystatechange = doNothing;
      callback(request.responseXML, request.status);
    }
  };

  request.open('GET', url, true);
  request.send(null);
}

function doNothing() {}

function loadMarkers(map) {
  downloadUrl('data.php', function(xml) {
    var markers = xml.documentElement.getElementsByTagName('marker');
    for (var i = 0; i < markers.length; i++) {
      var lat = parseFloat(markers[i].getAttribute('lat'));
      var lng = parseFloat(markers[i].getAttribute('lng'));
      var infoContent = markers[i].getElementsByTagName('info')[0].textContent;
      
      var marker = new google.maps.Marker({
        position: new google.maps.LatLng(lat, lng),
        map: map
      });

      // 给标记绑定信息窗口
      google.maps.event.addListener(marker, 'click', function() {
        new google.maps.InfoWindow({content: infoContent}).open(map, this);
      });
    }
  });
}

额外检查点 #

• 确保data.php返回的HTTP头是Content-Type: text/xml; charset=utf-8，避免解析时的编码问题；
• 打开浏览器控制台的「Network」标签，查看data.php的返回内容，确认XML格式没有语法错误（比如未闭合的标签、遗漏的转义）。

内容的提问来源于stack exchange，提问作者Ryan D