在 map 的初始加载中， map 加载得很好，但如果您更改为不同的 View ，然后返回到包含 map 的 View ， map 将显示为灰色。如果调整 View 大小， map 就会正确显示。
环境有点......复杂，但本质上我们使用 AngularJS 和 Jade 模板引擎，并使用 Stylus 作为 CSS 预处理器来创建 Web 应用程序。
除了源代码之外，我还附上了 map 对象的屏幕截图。在第一个中， map 对象很好，但在第二个中，似乎有一个 tosurl 指向谷歌地图 api 的服务条款页面，这可能意味着某些内容未正确加载。
重复一遍， map 最初加载得很好，但如果我们更改为单独的页面，然后返回到包含 map 的页面。 map 显示为灰色，直到您刷新或调整 View 大小。
每当加载包含 map 的页面时，都会完全重新创建 map 。我也尝试过在 View 上调用调整大小，但这似乎也不起作用。
任何意见/建议/见解将不胜感激。这是代码(我稍微修改了它以使其更易于阅读):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval' *; script-src 'unsafe-inline' 'unsafe-eval' data: blob: *; style-src 'unsafe-inline' blob: data: *; media-src *; connect-src *;">
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="google-signin-scope" content="profile email">
<meta name="google-signin-client_id" content="XXXXXXXXXX.apps.googleusercontent.com">
<title></title>
<!-- link(rel="apple-touch-startup-image" href="/startup.png") //for startup image on ios-->
<link rel="shortcut icon" href="favicon.ico">
<!-- build:css css/index.css-->
<link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.css">
<link rel="stylesheet" href="bower_components/angular-material/angular-material.css">
<link rel="stylesheet" type="text/css" href="css/index.css">
<!-- endbuild -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAJ5Z1l30hcJxETpewJN7yiki0y4gnkd_s"></script>
<script src="https://apis.google.com/js/platform.js?onLoad=onLoadCallback" async defer></script>
<script type="text/javascript">
var google = window.google;
function GoogleMap(setLocation) {
// create default options
var options = {
center : new google.maps.LatLng(35.6895000, 139.6917100),
zoom : 15,
disableDefaultUI: true,
mapTypeId : google.maps.MapTypeId.ROADMAP
};
var googleMap = this;
var canvas = window.document.getElementById('googleMap');
canvas.style.height = '415px';
googleMap.directionsDisplay = new google.maps.DirectionsRenderer();
googleMap.directionsService = new google.maps.DirectionsService();
googleMap.markers = [];
googleMap.watch = {'prevLat' : null, 'prevLng' : null};
googleMap.map = new google.maps.Map(canvas, options);
googleMap.directionsDisplay.setMap(googleMap.map);
googleMap.getCurrentPosition(setLocation); // creates a marker at the users current position
}
</script>
</head>
<body>
<div id="googleMap" flex="flex"></div>
</body>
</html>
最佳答案
每当改变 View 时，都需要触发 map 调整大小事件。
google.maps.event.trigger(map, 'resize');
取决于 View 的更改方式，您可以在 View 更改函数中手动触发此事件或添加到 map bounds_change事件
function viewedChanged (){
dosomething();
google.maps.event.trigger(map, 'resize');
}
//or
google.maps.event.addListener(map, 'bounds_changed', function() {
google.maps.event.trigger(map, 'resize');
}
关于javascript - 谷歌地图 API v3 : Initial View is Fine but Gray Box with No Map if View is changed，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37225562/