javascript - 谷歌地图不会显示在浏览器上

Question

我正在尝试使用 Google Map API V3 并显示带有几个地理位置点之间路线的 map 。到目前为止，我能够生成一个路径，然后我编写了下面的代码，它在运行时不会在 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 map 对象以在页面上添加 map 。

//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);

jsfiddle + create map object参见 Google API v3 文档