google-maps - 在 angular.dart View 中加载谷歌地图(ng-view)

Question

我正在尝试在 angular.dart 中创建具有多个 View 的单页应用程序，但我找不到加载 Google map 的工作示例 在被路由到的 View 中。

我正在使用 google_maps 包。当包含 map 的 div 元素在主 index.html 页面中定义时，它工作正常，但在 View 中定义 map div 时抛出异常:

'TypeError: Cannot read property 'offsetWidth' of null'

我想这意味着在加载指令类时 View 尚未呈现。应该如何在 View 中加载 map ？

这是路由器:

@InjectableService()
class DefaultRouteInitializer implements RouteInitializer {

  init(Router router, ViewFactory view) {
  router.root
    ..addRoute(
        name: 'city',
        path: '/city',
        enter: view('view/city_view.html'));
  }
}

和 View html:

<div city-ctrl>
  <div class="row">
    <div class="col-md-12">
      <div id="city_map_canvas" style="width: 100px; height: 100px;">&nbsp;</div>
    </div>
  </div>
</div>

指令类在创建实际 map 时遇到问题:

import 'dart:html';
import 'package:angular/angular.dart';
import 'package:google_maps/google_maps.dart';

@NgDirective(
  selector: '[city-ctrl]'
)
class CityController {

  CityController() {
    final mapOptions = new MapOptions()
    ..zoom = 8
    ..center = new LatLng(-34.397, 150.644)
    ..mapTypeId = MapTypeId.ROADMAP
    ;
    final map = new GMap(querySelector("#city_map_canvas"), mapOptions);
  }

}

Answer 1

我设法通过让 city-ctrl 指令实现 NgAttachAware 接口(interface)方法 attach() 并从那里启动 map 来实现这一点。构造函数显然是错误的地方。结果如下:

@NgDirective(
  selector: '[city-ctrl]'
)
class CityController implements NgAttachAware {

  CityController() {
  }

  attach() {    
    final mapOptions = new MapOptions()
    ..zoom = 8
    ..center = new LatLng(-34.397, 150.644)
    ..mapTypeId = MapTypeId.ROADMAP
    ;
    final map = new GMap(querySelector("#city_map_canvas"), mapOptions);
  }

}