0

我从 Google Maps API 复制了一个叠加折线示例的源代码，当我从 .htm 文件执行该代码时，它没有显示任何内容。我一直在学习 html、javascript 和 CSS，但我自己无法解决这个问题。这是我到目前为止的代码：

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Google Maps JavaScript API v3 Example: Polyline Simple</title>
<link href="/maps/documentation/javascript/examples/default.css" rel="stylesheet">
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>

  function initialize() {
    var myLatLng = new google.maps.LatLng(0, -180);
    var mapOptions = {
      zoom: 3,
      center: myLatLng,
      mapTypeId: google.maps.MapTypeId.TERRAIN
    };

    var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);

    var flightPlanCoordinates = [
        new google.maps.LatLng(37.772323, -122.214897),
        new google.maps.LatLng(21.291982, -157.821856),
        new google.maps.LatLng(-18.142599, 178.431),
        new google.maps.LatLng(-27.46758, 153.027892)
    ];
    var flightPath = new google.maps.Polyline({
      path: flightPlanCoordinates,
      strokeColor: '#FF0000',
      strokeOpacity: 1.0,
      strokeWeight: 2
    });

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

1 回答 1

2

它的工作你只是看不到它。向其中添加以下样式：

#map_canvas{
    height:500px;
}

小提琴：http: //jsfiddle.net/ax6wg/

于 2013-02-23T14:43:57.410 回答