1

今日、私はいくつかのデータを使用して Google マップを作成しようとしています。問題は、Google マップの例のコードをコピーして貼り付けていることですが、何も来ていません...空白のページが表示されます....クレイジー？何が起こっているのか教えてください。私はクロムとファイアフォックスを使用しています..両方とも空白です。

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps JavaScript API v3 Example: Polygon Arrays</title>
<link href="/maps/documentation/javascript/examples/default.css" rel="stylesheet"  type="text/css" />
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">

var map;
var infoWindow;

function initialize() {
var myLatLng = new google.maps.LatLng(24.886436490787712, -70.2685546875);
var myOptions = {
  zoom: 5,
  center: myLatLng,
  mapTypeId: google.maps.MapTypeId.TERRAIN
 };

 var bermudaTriangle;

 map = new google.maps.Map(document.getElementById("map_canvas"),
    myOptions);

 var triangleCoords = [
    new google.maps.LatLng(25.774252, -80.190262),
    new google.maps.LatLng(18.466465, -66.118292),
    new google.maps.LatLng(32.321384, -64.75737)
 ];

 bermudaTriangle = new google.maps.Polygon({
  paths: triangleCoords,
  strokeColor: "#FF0000",
  strokeOpacity: 0.8,
  strokeWeight: 3,
  fillColor: "#FF0000",
  fillOpacity: 0.35
 });

 bermudaTriangle.setMap(map);

 // Add a listener for the click event
 google.maps.event.addListener(bermudaTriangle, 'click', showArrays);

 infowindow = new google.maps.InfoWindow();
 }

 function showArrays(event) {

// Since this Polygon only has one path, we can call getPath()
// to return the MVCArray of LatLngs
var vertices = this.getPath();

var contentString = "<b>Bermuda Triangle Polygon</b><br />";
contentString += "Clicked Location: <br />" + event.latLng.lat() + "," + 
event.latLng.lng() + "<br />";

// Iterate over the vertices.
for (var i =0; i < vertices.length; i++) {
  var xy = vertices.getAt(i);
  contentString += "<br />" + "Coordinate: " + i + "<br />" + xy.lat() +"," + xy.lng();
}

// Replace our Info Window's content and position
infowindow.setContent(contentString);
infowindow.setPosition(event.latLng);

infowindow.open(map);
}  
</script>
</head>
<body onload="initialize()">
<div id="map_canvas"></div>
</body>
</html>
4

1 に答える 1

1

問題は、相対参照をGoogleのスタイルシートにコピーしたことであり、そこでサイズmap_canvasが定義されます。

そのサイズをdiv明示的に設定するか、スタイルシートへの絶対参照を使用すると、機能します（私はそれを試しました）。

于 2012-04-24T17:28:22.090 に答える