与AngularJS内置了谷歌地图应用程序工作。

Working on a Google Map app built with AngularJS.

目前部署的沙箱： http://of.xchg.com/

点击地图链接，如果有任何渲染，你会发现只有一个瓦。

Click Map link and you will notice only ONE tile IF ANY are rendered.

如果你再调整浏览器窗口，那么地图图块的其余部分将完全呈现。

If you then RESIZE the browser window, THEN the rest of the map tiles will render completely.

下面是Git项目： https://github.com/LarryEitel/of4

为什么不是所有的谷歌地图图块呈现？

Why are not all Google Map Tiles rendered?

有没有一种方法来测试瓷砖完整呈现？

Is there a way to test for complete rendering of tiles?

有没有办法强制所有地图图块的重新渲染？

Is there a way to force re-rendering of all map tiles?

推荐答案

大量的试验和错误之后，我发现了一个解决方法。仅仅通过注射的GoogleMap服务到应用程序运行命令，它成功地呈现完整的地图。我也不得不使默认'/'路线显示在地图上。别的我会做，涉及试图从家庭（无图）页面的地图页面切换将导致部分呈现的映像。 （

After a lot of trial and error, I found a workaround. By merely injecting the GoogleMap Service into the app run command, it successfully rendered the complete map. I ALSO had to make the default '/' route show the map page. Anything else I would do that involved trying to switch from a home (non-map) page to the map page would result in a partially rendered map. :(

也许我还是会有人提出一个更好的解决方案。 ：）

Perhaps I or someone will suggest a more elegant solution. :)

  // Generated by CoffeeScript 1.6.1
  (function() {
    'use strict';
    angular.module('of4App', []).config(function($routeProvider) {
      return $routeProvider.when('/menu', {
        templateUrl: 'views/menu.html',
        controller: 'MainCtrl'
      }).when('/list', {
        templateUrl: 'views/list.html',
        controller: 'MainCtrl'
      }).when('/map', {
        templateUrl: 'views/map.html',
        controller: 'MapCtrl'
      }).when('/about', {
        templateUrl: 'views/main.html',
        controller: 'MainCtrl'
      }).otherwise({
        redirectTo: '/map'
      });
    }).run(function($rootScope, $location, GoogleMap) {
      var rootScope;
      rootScope = $rootScope;
      rootScope.navBarHeight = 40;
      return rootScope.mapShown = function() {
        var mapShown;
        mapShown = $location.path().indexOf('/map') > -1;
        return mapShown;
      };
    });

  }).call(this);