1

我正在尝试按照有关如何设置谷歌地图样式的教程进行操作，但样式不起作用，仅在屏幕上显示一个灰色方块（我创建的 div）。这是我正在使用的代码：

<!DOCTYPE html>
<html>
    <head>
        <style>
            #map_canvas {
                width: 500px;
                height: 500px;
                background-color: #CCC;
            }
        </style>
        <script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
        <script>
            function initialize() {
                var styles = [
                  {
                    featureType: 'road',
                    elementType: 'geometry',
                    stylers: [
                      { color: '#000000' },
                      { weight: 1.6 }
                    ]
                  }, {
                    featureType: 'road',
                    elementType: 'labels',
                    stylers: [
                      { saturation: -100 },
                      { invert_lightness: true }
                    ]
                  }, {
                    featureType: 'landscape',
                    elementType: 'geometry',
                    stylers: [
                      { hue: '#ffff00' },
                      { gamma: 1.4 },
                      { saturation: 82 },
                      { lightness: 96 }
                    ]
                  }, {
                    featureType: 'poi.school',
                    elementType: 'geometry',
                    stylers: [
                      { hue: '#fff700' },
                      { lightness: -15 },
                      { saturation: 99 }
                    ]
                  }
                ];
                var styledMap = new google.maps.styleMapType(styles,{name: "styled Map"});
                var map_canvas = document.getElementById('map_canvas');
                var map_options = {
                    center: new google.maps.LatLng(44.5403, -78.5463),
                    zoom: 8,
                    mapTypeControlOptions: {
                        mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'map_style']
                    }
                }
               var map = new google.maps.Map(map_canvas, map_options);
               map.mapTypes.set('map_style', styledMap);
               map.setMapTypeId('map_style');   
             }
            google.maps.event.addDomListener(window, 'load', initialize);
        </script>
    </head>
    <body>
        <div id="map_canvas">

        </div>

    </body>
</html>

谁能帮我？

4

1 回答 1

3

您需要使用 JavaScript 调试器。你以前用过一个吗？如今，每个浏览器都有可用的开发人员工具。我最喜欢的是Chrome DevTools。

如果您在 DevTools 打开的情况下加载代码，您会看到它在错误的行上停止：

var styledMap = new google.maps.styleMapType(styles,{name: "styled Map"});

将鼠标滚动到该行的各种名称上。您会看到google已定义，google.maps已定义，但google.maps.styleMapTypeis undefined。

将该行与教程或文档进行比较，您会发现您需要的StyledMapType是styleMapType.

解决这个问题，你的地图就可以工作了。

但是，请不要只接受这个修复并运行它。花一些时间使用开发工具并熟悉它们。这将为您在以后的调试中节省大量时间。

于 2013-04-27T20:44:26.393 回答