javascript - 为什么在此设置中 Google map 容器会突然加载为灰色空白？

Question

有人能发现下面的错误吗？它对我来说工作得很好，直到我显然做了一些小的改变，现在 map 应该显示的区域是灰色的空白。一种样式似乎也应用于我的 #big-map 容器，我认为在我的代码工作之前它并不存在(但我可能又错了)无论如何，它一直在插入我太疯狂了，我想我自己研究这个问题太久了，所以我想我会分享。 :-)

预先感谢您的帮助!

HTML:

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<div id="big-map"></div>

CSS/更少:

#big-map {
   float: left;
   width: 100%;
   height: 290px;
   margin-top: 20px;

   >div {
      position: absolute;
      left: -3px !important;
      top: -44px !important;
      width: 103% !important;
      height: 120% !important;
    }
}

Javascript/jQuery:

var maps = {
    addBigMap : function (options)
    {
        // build map
        var bounds = new google.maps.LatLngBounds();
        var hue = options.hue ? options.hue : "#90cef1";          
        var settings = {
            mapTypeId: 'roadmap',
            styles : [{         
                         stylers: [{hue: hue}, {saturation: -20}],
                      },
                      {
                         featureType: "road",
                         elementType: "geometry",
                         stylers: [{lightness: 100}, {visibility: "simplified"}]
                      },
                      {
                         featureType: "road",
                         elementType: "labels",
                         stylers: [{visibility: "off"}]
                      }]
        };
        var map = new google.maps.Map(options.$container[0], settings);
        map.setTilt(45);
    }
};

maps.addBigMap({
    $container: $("#big-map"),
    hue: "#90cef1"
});

DOM 结果:

<div id="big-map" style="position: relative; overflow: hidden; transform: translateZ(0px); background-color: rgb(229, 227, 223);">
   <div class="gm-style" style="position: absolute; left: 0px; top: 0px; overflow: hidden; width: 100%; height: 100%; z-index: 0;">
      <div style="position: absolute; left: 0px; top: 0px; overflow: hidden; width: 100%; height: 100%; z-index: 0; cursor: url(http://maps.gstatic.com/mapfiles/openhand_8_8.cur) 8 8, default;">
         <div style="position: absolute; left: 0px; top: 0px; z-index: 1; width: 100%; transform-origin: 0px 0px 0px; transform: matrix(1, 0, 0, 1, 0, 0);">
            <div style="transform: translateZ(0px); position: absolute; left: 0px; top: 0px; z-index: 100; width: 100%;">
               <div style="position: absolute; left: 0px; top: 0px; z-index: 0;">
                  <div style="position: absolute; left: 0px; top: 0px; z-index: 1;"></div>
               </div>
            </div>
            <div style="transform: translateZ(0px); position: absolute; left: 0px; top: 0px; z-index: 101; width: 100%;"></div>
            <div style="transform: translateZ(0px); position: absolute; left: 0px; top: 0px; z-index: 102; width: 100%;"></div>
            <div style="transform: translateZ(0px); position: absolute; left: 0px; top: 0px; z-index: 103; width: 100%;"></div>
            <div style="position: absolute; z-index: 0;">
               <div style="overflow: hidden;"></div>
            </div>
         </div>
         <div style="position: absolute; left: 0px; top: 0px; z-index: 2; width: 100%; height: 100%;">         </div>
         <div style="position: absolute; left: 0px; top: 0px; z-index: 3; width: 100%; transform-origin: 0px 0px 0px; transform: matrix(1, 0, 0, 1, 0, 0);">
            <div style="transform: translateZ(0px); position: absolute; left: 0px; top: 0px; z-index: 104; width: 100%;"></div>
            <div style="transform: translateZ(0px); position: absolute; left: 0px; top: 0px; z-index: 105; width: 100%;"></div>
            <div style="transform: translateZ(0px); position: absolute; left: 0px; top: 0px; z-index: 106; width: 100%;"></div>
            <div style="transform: translateZ(0px); position: absolute; left: 0px; top: 0px; z-index: 107; width: 100%;"></div>
         </div>
       </div>
    </div>
</div>

Answer 1

center 和 zoom 选项在 new google.maps.Map 构造函数中没有默认值。另外，mapTypeId 采用 constant as an argument ，而不是字符串。

因此，要解决此问题，请添加 center 和 zoom 的默认值，并删除 mapTypeId(因为 Google 默认类型为无论如何，路线图)。

最后，删除第一个 stylers 行末尾的逗号。

Here's a jsfiddle如果你愿意的话就可以玩。

maps = {
    addBigMap: function(options) {
        // build map
        var bounds = new google.maps.LatLngBounds();
        var hue = options.hue ? options.hue : "#90cef1";     
        var latlng = new google.maps.LatLng(36.4120739, -82.444035);
        var settings = {
            center: latlng,
            zoom: 8,
            styles : [{         
                         stylers: [{hue: hue}, {saturation: -20}]
                      },
                      {
                         featureType: "road",
                         elementType: "geometry",
                         stylers: [{lightness: 100}, {visibility: "simplified"}]
                      },
                      {
                         featureType: "road",
                         elementType: "labels",
                         stylers: [{visibility: "off"}]
                      }]
        };
		var map = new google.maps.Map(options.$container[0], settings);
        map.setTilt(45);
    },
    init: function() {
        if (document.readyState === 'loading') {
            google.maps.event.addDomListener(window, 'load', maps.init);
            return;
        }
        maps.addBigMap({
            $container: $("#big-map"),
            hue: "#90cef1"
        });
    }
};

#big-map {
   float: left;
   width: 100%;
   height: 290px;
   margin-top: 20px;

   >div {
      position: absolute;
      left: -3px !important;
      top: -44px !important;
      width: 103% !important;
      height: 120% !important;
    }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?callback=maps.init"></script>
<div id="big-map"></div>