Question

我有一个工作页面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新手可能理解的简单答案吗？

Answer 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。

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

1 个答案: