将 XML 数据加载到 Google 地图中？答案

【问题标题】：Loading XML data into Google Maps?将 XML 数据加载到 Google 地图中？
【发布时间】：2017-02-26 13:57:39
【问题描述】：

我有一个工作页面Lake District Walks，它从页面内的静态数据加载标记数据和infoWindows。我想做的是从我生成并验证的 XML 文件中加载数据。

到目前为止我的代码如下：

JavaScript：

function initMap() {
  var map;
  var bounds = new google.maps.LatLngBounds();
  var mapOptions = {
    mapTypeId: 'terrain'
  };

  // display map
  map = new google.maps.Map(document.getElementById("mapCanvas"), mapOptions);
  map.setTilt(50);

  // Multiple markers data - walk, latitude, and longitude
  var markers = [
    ['Walk 3508', '<div class="info_content">' + '<a href=/walk-3508-introduction target=blank>The Crinkle Crags from Wrynose Pass</a> (5.00 miles)' + '</div>', 54.414586, -3.1155786],
    ['Walk 3525', '<div class="info_content">' + '<a href=/walk-3525-introduction target=blank>Catbells from Gutherscale (Route B)</a> (4.00 miles)' + '</div>', 54.57946, -3.1680418],
    ['Walk 1214', '<div class="info_content">' + '<a href=/walk-1214-introduction target=blank>Carrock Fell & High Pike from Mosedale</a> (7.00 miles)', 54.69416, -3.0053205]
  ];

  // Add multiple markers to map
  var infoWindow = new google.maps.InfoWindow(),
      marker, i;

  // Place each marker on the map  
  for (i = 0; i < markers.length; i++) {
    var position = new google.maps.LatLng(markers[i][2], markers[i][3]);

    bounds.extend(position);
    marker = new google.maps.Marker({
      position: position,
      map: map,
      title: markers[i][0]
    });

    // Add info window to marker    
    google.maps.event.addListener(marker, 'mouseover', (function(marker, i) {
      return function() {
        infoWindow.setContent(markers[i][1]);
        infoWindow.open(map, marker);
      }
    })(marker, i));

    // Center the map to fit all markers on the screen
    map.fitBounds(bounds);
  }

  // Set zoom level
  var boundsListener = google.maps.event.addListener((map), 'bounds_changed', function(event) {
    this.setZoom(10);
    google.maps.event.removeListener(boundsListener);
  });
}

// Load initialize function
google.maps.event.addDomListener(window, 'load', initMap);

XML：

<marker name="<a href=/walk-3508-introduction target=blank>The Crinkle Crags from Wrynose Pass</a> (5.00 miles)" lat="54.414586" lng="-3.1155786"/>

谁能提供一个 JavaScript 新手可能理解的简单答案？

【问题讨论】：

能否分享一下XML文件
这是文件的一行也可以在walkingbritain.co.uk/maps/genxml2.php查看文件
更新了标题，美化了 JavaScript 并添加了示例 XML。

标签： javascript php xml google-maps

【解决方案1】：

试试这个：

<html>

<head>
    <title>Map example</title>
</head>


<body>
    <div id="mapCanvas" style="width:100%; height:100%;"></div>

    <script src="http://maps.google.com/maps/api/js?key=AIzaSyBrkEtNRW1ixXwuAGBNOMrAw97-mSPWs9k"></script>
    <script src="https://code.jquery.com/jquery-2.2.4.min.js" 
    integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="  
    crossorigin="anonymous"></script>

    <script>


    function initMap() {

    var map;
    var bounds = new google.maps.LatLngBounds();
    var mapOptions = {
        mapTypeId: 'terrain'
    };

    // display map

    map = new google.maps.Map(document.getElementById("mapCanvas"), mapOptions);
    map.setTilt(50);


    // Add multiple markers to map
    var infoWindow = new google.maps.InfoWindow(), marker, i;

    var filename = 'http://www.walkingbritain.co.uk/maps/genxml2.php';
    jQuery.get(filename, function(xml){

        jQuery(xml).find("marker").each(function(){
            // Place each marker on the map  
            console.log(jQuery(this));

            var description = jQuery(this).attr('name');
            var lat = jQuery(this).attr('lat');
            console.log(lat);
            var lng = jQuery(this).attr('lng');
            var position = new google.maps.LatLng(lat, lng);
            bounds.extend(position);
            marker = new google.maps.Marker({
                position: position,
                map: map,
                title: 'Marker'
            });

            // Add info window to marker    
            google.maps.event.addListener(marker, 'mouseover', (function(marker, i) {
                return function() {
                    infoWindow.setContent(description);
                    infoWindow.open(map, marker);
                }
            })(marker, i));

            // Center the map to fit all markers on the screen
            map.fitBounds(bounds);
        });
    });

    // Set zoom level
    var boundsListener = google.maps.event.addListener((map), 'bounds_changed', function(event) {
        this.setZoom(10);
        google.maps.event.removeListener(boundsListener);
    });

    }
    // Load initialize function
    google.maps.event.addDomListener(window, 'load', initMap);
    </script>

</body>

您的 XML 文件没有每个标记的 title，所以我现在将标题设置为 Marker。

【讨论】：

刚刚尝试过，没有收到任何脚本错误。但是结果是地图所在的空白灰色区域，没有标记或信息窗口。
我现在已将测试页中的所有代码放入我的答案中。你是从walkingbritain.co.uk 运行这个吗？如果您不从该域运行它，您很可能会收到No 'Access-Control-Allow-Origin' header is present on the requested resource.
是的，我正在从 walkbritain.co.uk 运行它，但已将 Google Api 代码更改为我的。该页面现在位于walkingbritain.co.uk/maps/newmap2.php - 出现蓝屏，只有一个标记，没有信息窗口。
现在也刚刚修复了该错误。请查看更新后的答案。
尼克非常感谢您的帮助。你需要一些工作吗？我的电子邮件地址在我的网站上。你节省了很多时间和心痛。