Question

使用AngularJS构建的Google Map应用程序。

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

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

如果您然后调整浏览器窗口的大小，那么其余的地图图块将完全呈现。

这是git项目：https://github.com/LarryEitel/of4

为什么不渲染所有Google地图图块？

有没有办法测试完整的瓷砖渲染？

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

Answer 1

在地图控制器中调用此函数：

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

这应该可以解决问题。

Answer 2

在加载视图后尝试重新定位地图时发现了这个问题。左上角会有一个瓷砖。

我注意到它将地图定位在div（0,0）的顶部，并且认为它必须在div可见之前进行测量。这意味着尺寸为0px, 0px，因此将地图居中意味着将单个图块放在（0,0）处。

我尝试了触发调整大小事件的解决方案

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

并且几乎可以工作 - 它用div填充了瓷砖，但它仍然以（0,0）为中心。

将重新居中的代码包装在$timeout()中的作用是什么。这可确保在代码运行之前div已完全加载并且大小正确。现在它完美无缺。

$timeout(function() {
    // still need this.
    google.maps.event.trigger(map, 'resize');   
    map.setCenter(53, -6);
});

Answer 3

经过大量的反复试验后，我找到了解决方法。只需将GoogleMap服务注入app run命令，它就成功渲染了完整的地图。我还必须使默认的'/'路线显示地图页面。我要做的其他事情涉及尝试从主页（非地图）页面切换到地图页面将导致部分渲染的地图。：（

也许我或某人会提出更优雅的解决方案。：）

  // 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);

为什么并非所有Google Map Tiles都是在AngularJS应用程序的初始加载时呈现的？

3 个答案: