0

我正在尝试 从我的计算机打开 html 文件http://www.geocodezip.com/v3_MW_example_map3.html 。我可以在互联网上打开它，但如果我查看页面源并将其另存为 HTML 文件，我无法打开或者我可以但不显示标记。使用的 XML 位于http://econym.org.uk/gmap/example.xml的位置，所以我也下载了它并将其放在与 html 文件相同的文件夹中。如何解决这个问题？因为我想更改此文件以适应我的需要谢谢

我的 HTML（没有必要的东西，如 css，添加..）现在看起来像这样：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head> 

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 


<script type="text/javascript"> 
//<![CDATA[
      // this variable will collect the html which will eventually be placed in the side_bar 


      // arrays to hold copies of the markers and html used by the side_bar 
      // because the function closure trick doesnt work there 
      var gmarkers = []; 

     // global "map" variable
      var map = null;
// A function to create the marker and set up the event window function 
function createMarker(latlng, name, html) {
    var contentString = html;
    var marker = new google.maps.Marker({
        position: latlng,
        map: map,
        zIndex: Math.round(latlng.lat()*-100000)<<5
        });

    google.maps.event.addListener(marker, 'click', function() {
        infowindow.setContent(contentString); 
        infowindow.open(map,marker);
        });
    // save the info we need to use later for the side_bar
    gmarkers.push(marker);

}

// This function picks up the click and opens the corresponding info window
function myclick(i) {
  google.maps.event.trigger(gmarkers[i], "click");
}

function initialize() {
  // create the map
  var myOptions = {
    zoom: 8,
    center: new google.maps.LatLng(43.907787,-79.359741),
    mapTypeControl: true,
    mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
    navigationControl: true,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  map = new google.maps.Map(document.getElementById("map_canvas"),
                                myOptions);

  google.maps.event.addListener(map, 'click', function() {
        infowindow.close();
        });
      // Read the data from example.xml
      downloadUrl("example.xml", function(doc) {
        var xmlDoc = xmlParse(doc);
        var markers = xmlDoc.documentElement.getElementsByTagName("marker");
        for (var i = 0; i < markers.length; i++) {
          // obtain the attribues of each marker
          var lat = parseFloat(markers[i].getAttribute("lat"));
          var lng = parseFloat(markers[i].getAttribute("lng"));
          var point = new google.maps.LatLng(lat,lng);
          var html = markers[i].getAttribute("html");
          var label = markers[i].getAttribute("label");
          // create the marker
          var marker = createMarker(point,label,html);
        }
        // put the assembled side_bar_html contents into the side_bar div
        //document.getElementById("side_bar").innerHTML = side_bar_html;
      });
    }

var infowindow = new google.maps.InfoWindow(
  { 
    size: new google.maps.Size(150,50)
  });


//]]>
</script> 

  </head> 
<body style="margin:0px; padding:0px;" onload="initialize()"> 

    <!-- you can use tables or divs for the overall layout --> 
    <table border="1"> 
      <tr> 
        <td> 
           <div id="map_canvas" style="width: 1050px; height: 1050px"></div> 
        </td> 

      </tr> 
    </table> 

    <noscript><p><b>JavaScript must be enabled in order for you to use Google Maps.</b> 
      However, it seems JavaScript is either disabled or not supported by your browser. 
      To view Google Maps, enable JavaScript by changing your browser options, and then 
      try again.</p>
    </noscript> 

//--></script>
  </body> 
</html>
4

1 回答 1

1

你不可以做这个。HTML 将呈现，但由于所有资源不在本地计算机上（css、js、图像等），您将遇到大量错误。您将需要使用 Maps API 来构建您自己的解决方案。

于 2012-04-04T12:44:30.087 回答