Question

地图不会加载到我的网站上，直到调整浏览器窗口大小

这是我的JS代码

<div class="map-cont">
        <div id="map" class="location-container map-padding" style="width:100%;height:400px;background:yellow"></div>
          <script>
          function initMap() {
            var uluru = {lat: 45.4420432, lng: 15.999982};
            var map = new google.maps.Map(document.getElementById('map'), {
              zoom: 15,
              center: uluru,
              scrollwheel: false
            });
            var marker = new google.maps.Marker({
              position: uluru,
              map: map
            });
          }
        </script>
        <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBEQc2mBnThiUz-Pj472iG1i2FyqJvNb00&callback=initMap">
        </script>
    </div>

这是CSS

#map { width: 100% !important; }
.map-cont { margin-left: 10%; }

当我删除.map-cont { margin-left: 10%; }时，它工作正常，但我不需要全屏。

Answer 1

我会尝试调整css并包含这些行。

   #map {
    width: 100%;
    height: 100%;
   }
   html,body{
     height: 100%;
     margin:0px;
   }

google maps api想要明确定义地图的高度和宽度，有时这会导致并发症。

Answer 2

尺寸问题是

for (var i = 0; i < personArray.length; i++) {
  var newDiv = document.createElement('div');
  newDiv.setAttribute('class', 'frame');
  document.getElementById('pic-grid').appendChild(newDiv);
  var newImg = document.createElement('img');
  newImg.setAttribute('src', personArray[i].url);
  newImg.setAttribute('onclick', 'promptForName(this)');
  newImg.setAttribute('onmouseover', 'styleIt(this)');
  newImg.setAttribute('onmouseout', 'unStyleIt(this)');
  newImg.setAttribute('id', personArray[i].firstname);
  document.getElementById('').appendChild(newImg);

}

Google地图无法加载

2 个答案: