谷歌地图API v3:Initial View is Fine，but Gray Box with No Map if

Google Maps API v3: Initial View is Fine but Gray Box with No Map if View is changed

本文关键字：Box Gray but with No if Map Fine v3 API Initial      更新时间：2023-09-26

在地图的初始加载时，加载非常好，但如果您更改到另一个视图，然后返回到包含地图的视图，则地图显示为灰色。如果调整视图的大小，地图就会正确显示。

环境有点。。。。复杂但本质上我们使用angularjs与jade模板引擎和手写笔作为css预处理器来创建一个webapp。

除了源代码，我还附上了地图对象的屏幕截图。在一个例子中，map对象很好，但在第二个例子中似乎有一个指向谷歌地图api服务条款页面的tosurl，这可能意味着某些内容没有正确加载。

有效地图对象

无效的地图对象

重复一遍，地图最初加载得很好，但如果我们换到一个单独的页面，然后返回到包含地图的页面。在刷新视图或调整视图大小之前，地图将显示为灰色。

每当加载包含映射的页面时，就会完全重新创建映射。我也试过在视图上调用resize，但似乎也不起作用。

任何意见/建议/见解都将不胜感激。这是代码（我稍微修改了一下，使其更容易阅读）：

<!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>

无论何时更改视图，都需要触发地图调整大小事件。

google.maps.event.trigger(map, 'resize');

取决于视图的更改方式，您和手动在视图更改功能中触发此事件或添加到映射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');
}
相关文章：