8

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

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

单击地图链接，您会注意到只有一个图块（如果有的话）被渲染。

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

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

为什么不是所有的 Google Map Tiles 都被渲染了？

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

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

4

3 回答 3

13

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

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

这应该够了吧。

于 2013-05-02T22:10:22.453 回答
2

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

我注意到它在div(0,0) 的左上角将地图居中，并认为它必须在div可见之前测量。这意味着尺寸是这样的0px, 0px，因此将地图居中意味着将单个图块放置在 (0,0) 处。

我尝试了触发resize事件的解决方案

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);
});
于 2014-02-19T22:19:09.360 回答
0

经过大量的试验和错误，我找到了一种解决方法。只需将 GoogleMap Service 注入到应用程序运行命令中，它就成功地呈现了完整的地图。我还必须让默认的“/”路线显示地图页面。我所做的任何其他涉及尝试从主页（非地图）页面切换到地图页面的事情都会导致部分渲染的地图。:(

也许我或某人会建议一个更优雅的解决方案。:)

  // 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);
于 2013-05-04T20:34:11.340 回答