谷歌地图不出现，标记不从 xml 文件生成

Question

initMap 函数一直有效，直到我添加了 downloadurl 函数，现在屏幕上什么也没有出现。页面上的其他所有内容都正常工作。如何生成地图以及带有各自标记的坐标？

function initMap() {
 map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 45.75372, lng: 21.22571},
zoom: 15
});


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);
}


downloadUrl('map.php', 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 address = markerElem.getAttribute('address');
    var type = markerElem.getAttribute('type');
    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('text');
    text.textContent = address
    infowincontent.appendChild(text);
    var icon = customLabel[type] || {};
    var marker = new google.maps.Marker({
      map: map,
      position: point,
      label: icon.label
    });

下面是生成 xml 的 php。这按预期工作。

    <?php 
     include('includes/functions.php');
     function parseToXML($htmlStr)
     {
              $xmlStr=str_replace('<','&lt;',$htmlStr);
              $xmlStr=str_replace('>','&gt;',$xmlStr);
              $xmlStr=str_replace('"','&quot;',$xmlStr);
              $xmlStr=str_replace("'",'&#39;',$xmlStr);
              $xmlStr=str_replace("&",'&amp;',$xmlStr);
              return $xmlStr;
          }
          $res = getMarkers();
          header("Content-type: text/xml");
          echo '<markers>';
          while ($row = $res->fetch_assoc()) {
              echo '<marker ';
            echo 'id="' . $row['id'] . '" ';
            echo 'name="' . parseToXML($row['name']) . '" ';
            echo 'address="' . parseToXML($row['address']) . '" ';
            echo 'lat="' . $row['lat'] . '" ';
            echo 'lng="' . $row['lng'] . '" ';
            echo 'type="' . $row['type'] . '" ';
            echo '/>';
          }
          echo '</markers>';

          ?>

Answer 1

我开始格式化您的原始代码，发现缺少一些位，最后得到您在下面看到的内容，为了记录，根本没有经过测试。如果您最初发布的代码是“原样”（即：完整），那么我怀疑控制台中会有很多错误。我几乎按照编写的方式解释了上面的代码 - 因为 initMap 函数本身定义了它使用的方法，而不是它们是分开的 - 由于格式的原因，原始代码是否以这种方式编写尚不清楚问题。

function initMap() {
    var mkrs=evts=[];

    var map = new google.maps.Map( document.getElementById('map'), {
        center: {
            lat: 45.75372,
            lng: 21.22571
        },
        zoom: 15
    });
    var iWin=new google.maps.InfoWindow( { maxWidth:400 } );


    var downloadUrl=function(url, callback) {
        var request = window.ActiveXObject ? new ActiveXObject('Microsoft.XMLHTTP') : new XMLHttpRequest;
        request.onreadystatechange = function() {
            if( request.status==200 && request.readyState == 4 ) {
                request.onreadystatechange = doNothing;
                callback.call( this, request, request.getResponseHeader('Content-Type') );
            }
        };
        request.open( 'GET', url, true );
        request.send( null );
    }

    var callback=function( data, ctype ) {
        /* inspect response - if there is none then panic! */
        console.log( 'Response: %o, Content-Type: %s', data, ctype );
        /*
            I'd be tempted to fork the logic in the php code
            so that if there is an error/exception of some type
            then send a non xml content type response and use the 
            ctype here to stop processing client side...
        */
        var xml = data.responseXML;
        var markers = xml.documentElement.getElementsByTagName('marker');

        Array.prototype.forEach.call( markers, function( node ) {

            var id = node.getAttribute('id');
            var name = node.getAttribute('name');
            var address = node.getAttribute('address');
            var type = node.getAttribute('type');

            var point = new google.maps.LatLng(
                parseFloat( node.getAttribute('lat') ),
                parseFloat( node.getAttribute('lng') )
            );

            /* prepare infowindow content */
            var div = document.createElement('div');
            var strong = document.createElement('strong');
                strong.textdiv = name;
            var text = document.createElement('p');
                text.textdiv = address;


            div.appendChild( strong );
            div.appendChild( document.createElement('br') );                    
            div.appendChild( text );


            var icon = customLabel[ type ] || {};   /* ? where is customLabel defined ? */
            var marker = new google.maps.Marker({
                id:id,
                map: map,
                position: point,
                label: icon.label
            });
            mkrs.push( marker );


            var evt = google.maps.event.addListener( marker, 'click', function( event ){
                iWin.setdiv( div );
                iWin.open( map, marker );
                iWin.setPosition( event.latLng );
            });
            evts.push( evt );
        });
    }

    downloadUrl.call( this, 'map.php', callback );
}