Question

在地图的初始加载时加载完全正常，但如果您更改为其他视图然后返回包含地图的视图，则地图会显示为灰色。如果您调整视图大小，则地图会正确显示。

环境有点......复杂但基本上我们使用angularjs将jade模板引擎和stylus作为css预处理器来创建webapp。

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

要重复，地图最初会加载完美，但如果我们更改为单独的页面，然后返回包含地图的页面。在您刷新视图或调整视图大小之前，地图会显示为灰色。

只要加载包含地图的页面，就会完全重新创建地图。我也曾尝试在视图上调用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>

Answer 1

每当您更改视图时，都需要触发map resize事件。

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

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

谷歌地图API v3：初始视图很好但灰色框如果视图已更改没有地图

1 个答案: