谷歌地图API造型错误

我想要关注如何设计谷歌地图，但样式不起作用，只显示屏幕上的灰色方块（我创建的div）的。这里是代码我使用：谷歌地图API造型错误

<!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>

谁能帮助我？

来源

2013-04-27 Filipe Ferminiano

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

如果加载与DevTools打开你的代码，你会看到它停止对有错误的行：

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

将鼠标移到该行上名目繁多。您会看到定义了google，并且定义了google.maps，但google.maps.styleMapType是undefined。

将该行与本教程或文档进行比较，您将看到您需要的是StyledMapType而不是styleMapType。

修复这个问题，你的地图就可以工作。

但是，请不要只是采取这种修补程序，并与它一起运行。花一些时间使用开发工具并熟悉它们。这将为您在未来的调试中节省很多时间。

来源

2013-04-27 20:44:26

感谢您的帮助！我不知道这些工具。 – 2013-04-27 22:59:19

我的荣幸。一旦你开始使用这些开发工具，你会爱上它们的。它使得查看代码中发生的事情变得更加容易。所以一定要探索他们提供的所有东西。 – 2013-04-28 00:12:41

谷歌地图API造型错误

回答

相关问题