Question

有人能发现下面的错误吗？这对我来说很好，直到我显然做了一些小的改变，现在地图应该显示的区域是一个灰色的空白。一个样式似乎也应用于我的#big-map容器，我认为之前我的代码工作时并不存在（但后来我可能错了）无论如何，它让我发疯，我想我我自己一直在看这个太久了，所以我想我会分享。： - ）

提前感谢您的帮助！

HTML：

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

CSS / LESS：

#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无论如何都要将类型默认为ROADMAP）。

最后，删除第一行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>

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

1 个答案: