如何在XML上绘制地图上的数据？

Question

如何在XML上绘制Google地图上的数据？

以下图片是我的XML格式：

使用此格式，我必须使用以下JavaScript代码在Google地图上绘制标记：

<div id="map"></div>
<script>

/* var customLabel = 
        Sports: {
            label: 'S'
        },

        Education: {
            label: 'E'
        },
        Crime: {
            label: 'C'
        },
        Health: {
            label: 'H'
        }
  };*/


  function initMap() {
    var map = new google.maps.Map(document.getElementById('map'), {
      center: {lat: 42.129220, lng: -80.085060},
      zoom: 15
    });
     var infoWindow = new google.maps.InfoWindow({map: map});


    /*if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(function(position) {

        var pos = {
          lat: position.coords.latitude,
          lng: position.coords.longitude
        };

        infoWindow.setPosition(pos);
        infoWindow.setContent('Your Location Found.');
        map.setCenter(pos);
      }, function() {
        handleLocationError(true, infoWindow, map.getCenter());
      });
    } else {
      // Browser doesn't support Geolocation
      handleLocationError(false, infoWindow, map.getCenter());
    }*/
   downloadUrl("x.php", function(data) {
        var xml = data.responseXML;
        var markers = xml.documentElement.getElementsByTagName('marker');
        Array.prototype.forEach.call(markers, function(markerElem) {
          var name = markerElem.getAttribute('title');
          var address = markerElem.getAttribute('address');
          /* var short_description = markerElem.getAttribute('short_description');
            var news_url = markerElem.getAttribute('news_url');
             var news_date = markerElem.getAttribute('news_date');*/    
          var type = markerElem.getAttribute('categories');
          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,

          });
          marker.addListener('click', function() {
            infoWindow.setContent(infowincontent);
            infoWindow.open(map, marker);
          });
        });
      });




}


  /*function handleLocationError(browserHasGeolocation, infoWindow, pos) {
    infoWindow.setPosition(pos);
    infoWindow.setContent(browserHasGeolocation ?
                          'Error: The Geolocation service failed.' :
                          'Error: Your browser doesn\'t support geolocation.');
  }*/



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 doNothing() {}

</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key= key_num &callback=initMap">
</script>


</body>
</html>

我没有得到输出。谁能告诉我这段代码有什么问题？

Answer 1

如果您输入控制台的错误消息会更好，但我首先看到的是没有API_KEY，您可以在此处获取：

https://developers.google.com/maps/documentation/javascript/get-api-key?hl=ES

同样，当您发布代码时，请尝试删除已注释的代码。