Google Maps标记不显示，出现ReferenceError错误求助

嘿，我帮你梳理出了几个导致错误和标记无法显示的核心问题，咱们逐个解决：

1. 未定义doNothing函数 #

你的代码里出现了request.onreadystatechange = doNothing;，但从来没有声明过这个函数，浏览器自然找不到它。只需要添加一个空函数即可：

function doNothing() {}

2. downloadUrl函数的语法错误 #

你在downloadUrl函数里意外重复写了function initMap()，而且new XMLHttpRequest后面漏掉了括号()，这会导致AJAX请求根本无法正常发起。修正后的downloadUrl应该是这样：

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, request.status);
    }
  };
  request.open('GET', url, true);
  request.send(null);
}

3. 变量作用域问题 #

• map变量无法被回调访问：map是在initMap内部声明的，你之前把downloadUrl的调用放在了initMap外面，导致回调里找不到map。需要把downloadUrl的调用移到initMap函数内部。
• marker作用域错误：你把marker.addListener写在了forEach循环外面，这时候marker已经不在当前作用域里了，而且每个标记都需要单独绑定点击事件，所以监听代码必须放到循环内部。

4. 未初始化infoWindow #

代码里直接使用了infoWindow但没有创建这个对象，需要在initMap里初始化它。

修正后的完整markersMap.js代码 #

// 先定义doNothing空函数
function doNothing() {}

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, request.status);
    }
  };
  request.open('GET', url, true);
  request.send(null);
}

function initMap() {
  // 初始化infoWindow
  var infoWindow = new google.maps.InfoWindow();
  
  // The location of Fuji
  var fuji = {lat: 35.358056, lng: 138.731111};
  // The map, centered at Fuji
  var map = new google.maps.Map(
    document.getElementById('map'), {zoom: 9, center: fuji});
  
  // 将downloadUrl调用移到initMap内部，确保能访问到map和infoWindow
  downloadUrl('test1.xml', function(data) {
    var xml = data.responseXML;
    var markers = xml.documentElement.getElementsByTagName('marker');
    Array.prototype.forEach.call(markers, function(markerElem) {
      var id = markerElem.getAttribute('id');
      var name = markerElem.getAttribute('name');
      var year = markerElem.getAttribute('year');
      var point = new google.maps.LatLng(
        parseFloat(markerElem.getAttribute('lat')),
        parseFloat(markerElem.getAttribute('lng')));

      var infowincontent = document.createElement('div');
      var strong = document.createElement('strong');
      strong.textContent = name;
      infowincontent.appendChild(strong);
      infowincontent.appendChild(document.createElement('br'));
      var text = document.createElement('span'); // 替换非标准的text元素为span
      text.textContent = year;
      infowincontent.appendChild(text);

      var marker = new google.maps.Marker({
        map: map,
        position: point
      });

      // 将点击监听放到循环内部，每个marker单独绑定
      marker.addListener('click', function() {
        infoWindow.setContent(infowincontent);
        infoWindow.open(map, marker);
      });
    });
  });
}

另外还有个小细节：你用了document.createElement('text')，这不是标准的HTML元素，建议改成span，避免潜在的渲染问题。

现在这些修改应该能解决你遇到的两个ReferenceError，并且让标记正常显示在地图上啦！

内容的提问来源于stack exchange，提问作者Борис Чумаков