谷歌地圖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造型錯誤

回答

相關問題