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

我试图在angular.dart中创建一个包含多个视图的单页应用程序,但是我找不到一个在路由到的视图中加载Google Map的工作示例.

我正在使用google_maps包.当在主index.html页面中定义包含地图的div元素时,它可以正常工作,但是在视图中定义了map div时会抛出异常:

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

我想这意味着在指令类加载时尚未呈现视图.如何在视图中加载Map?

这是路由器:

@InjectableService()
class DefaultRouteInitializer implements RouteInitializer {

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

和视图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>

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

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

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

@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);
  }

}
https://stackoverflow.com/questions/21061290/loading-google-map-in-angular-dart-view-ng-view

本站文章除注明转载外,均为本站原创或编译
转载请明显位置注明出处:google-maps – 在angular.dart视图中加载谷歌地图(ng-view)