javascript - Google Maps API 在 ajax 页面加载时显示灰色 map

Question

我正在使用 ajax 加载(到 div 中)包含 Google map 的页面，但是当加载完成后，它仅显示 map 的灰色背景，左下角有一个 Google Logo ，以及一个“使用条款”链接位于右下角。

如果我调整窗口大小， map 会立即出现。另外，如果我按 F5 重新加载整个页面， map 将正常加载。只有当我最初使用 jQuery ajax 加载此 map 页面时，我才会得到灰色 map 。

在容器页面上，我加载 map api。

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>

在 map 页面上我做其他所有事情。

$(document).ready(function() {
  initializeMap();
});

function initializeMap() {
  var companyname = document.getElementById("companyname").value;

  infowindow = new google.maps.InfoWindow();
  latlng = new google.maps.LatLng(-34.397, 150.644);

  var mapOptions = {
    zoom: 13,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }

  geo = new google.maps.Geocoder();
  map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
  bounds = new google.maps.LatLngBounds();

  resultsPanel = new google.maps.DirectionsRenderer({suppressMarkers:true});
  resultsPanel.setMap(map);

  $("#progressbar").progressbar(0);

  var companyaddress = getCompanyAddress();
  setCompanyMarker(companyaddress,companyname)
}

调整大小时，我重新计算高度，以便它填满整个页面。如果我不这样做，那么 map 将以 1px 高度打开，尽管我不知道为什么。这可能是同一个问题吗？

function calculateHeight(){
  var height = $('#maincontent').height();
  $('#map-canvas').css("height",height);
}

$(window).resize(function () {
  calculateHeight();
});

由于当用户手动调整窗口大小时 map 会出现，我认为以编程方式调用调整大小事件会产生相同的效果，因此我添加了以下内容:

$(window).trigger('resize');

但这没有任何作用。

我尝试将 api 脚本移至 map 页面，但如果我多次加载页面，则会导致“您已多次加载相同的脚本”错误，进而触发其他错误。但是，通过此设置，我能够在加载三个页面后使用 ajax 成功加载 map 。换句话说，在加载容器页面一次后，我必须单击菜单项(加载 map 页面)三次才能使其正确加载。前两次仍然无法正确加载，但此后每次都能正确加载，尽管会出现一些 JavaScript 错误。

我还尝试按照 this suggestion 异步加载 api 脚本.

我还尝试按照 this suggestion 将“async defer”添加到 api 脚本中.

这些建议都不起作用，现在我就在这里。

通过 ajax 加载页面时，是什么导致 map 加载时显示灰色背景？我该怎么办？

Answer 1

1.确保map-canvas在CSS中设置了width。

2.您到底是什么时候尝试按照 geocodezip 建议调用 google.maps.event.trigger(map,'resize'); 的？您需要在任何 map-canvas div 的尺寸更改 (calculateHeight) 或 map div 的可见性发生任何更改后调用它。如果 map-canvas div，或其父级，或其父级的父级(任何前级)在某个时刻设置了 display:none，则 map View 将无法正确初始化你只会看到灰色 map 。还要将 map 调整大小代码添加到一些超时中以确保确定，然后如果有效则降低它，例如:

function calculateHeight(){
  var height = $('#maincontent').height();
  $('#map-canvas').css("height",height);
  setTimeout(function(){ //also do this after any other visibility/dimension change
     google.maps.event.trigger(map,'resize');
  }, 500);
}