Question

我正在尝试使用Google Map API V3并显示一个地图，其中包含几个地理定位点之间的路线。到目前为止，我能够生成一个单独的路径，然后我编写下面的代码，它在运行时不会给JS带来任何错误，但它不会在浏览器上显示任何内容。我不确定有什么问题，我可能会完全错误地编码。对不起。

  <style type="text/css">
    html, body, #map_canvas { margin: 0; padding: 0; height: 100% }

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

    <script type="text/javascript">

          var start = [-33.890542, 151.274856];

          var end = [ -33.950198, 151.259302];
          var beaches = [

                        [ -33.923036, 151.259052],
                        [ -34.028249, 151.157507],
                        [ -33.80010128657071, 151.28747820854187]

                      ];

          var map;
          var mapOptions = { center: new google.maps.LatLng(start[0], start[1]), zoom: 3,
            mapTypeId: google.maps.MapTypeId.ROADMAP };

          function DrawRoute(src,dest,i){
                      var d_Dis_name = 'directionsDisplay'+i
                      d_Dis_name = new google.maps.DirectionsRenderer({
                      suppressMarkers: false,
                      suppressInfoWindows: true
                    });
              d_Dis_name.setMap(map);
              var src = new google.maps.LatLng(src[0],src[1]);
              var dest = new google.maps.LatLng(dest[0],dest[1]);
              var request = {
                origin: src, 
                destination: dest,
                travelMode: google.maps.DirectionsTravelMode.DRIVING
              };

              directionsService.route(request, function(response, status) {
                if (status == google.maps.DirectionsStatus.OK) {
                  d_Dis_name.setDirections(response);
                }
              });
          }

          function initialize() {
            directionsService = new google.maps.DirectionsService();
            var counter = 1;
            DrawRoute(start,beaches[0],counter);
            counter = counter +1;
            for (var x = 0; x < beaches.length-1; x++){
              DrawRoute(beaches[x],beaches[x+1],counter);
              counter = counter+1;
            }
            DrawRoute(beaches[beaches.length-1],end,counter);
          }
          google.maps.event.addDomListener(window, 'load', initialize);

    </script>

    <div id="map_canvas"></div>

这有什么问题？

Answer 1

您忘记创建Google地图对象以在您的网页上添加地图。

//var map;
var mapOptions = { center: new google.maps.LatLng(start[0], start[1]), zoom: 3,
        mapTypeId: google.maps.MapTypeId.ROADMAP };
// create object
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

谷歌API v3文档中的

jsfiddle + create map object

Answer 2

在标签中添加一个width属性？（不确定）

width: 100%;

Google地图不会显示在浏览器上

2 个答案: