2

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

我正在使用该google_maps软件包。div在主页中定义包含地图的元素时效果很好index.html，但是在视图中定义地图 div 时会引发异常： 

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

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

这是路由器：

@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>

并且 Directive 类在创建实际地图时遇到问题：

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

}
4

3 回答 3

1

我在我的@component 中尝试了 Günter Zöchbauer 提出的解决方案。但它仍然不起作用（也许我犯了一些错误），之后我注意到我的 gogole 地图在 shadwo dom 中。所以我可以实现 ShadowRootAware 类，它是onShadowRoot 方法显示谷歌地图。因为 onShadowRoot 方法将被调用，直到加载 html 元素。这是组件html：

  <div id="addculture">
  ...some code 
   <div id="map-canvas"></div>
  ...some code
  </div>

这是组件飞镖文件：

  library culture_component;
import 'dart:async';
import 'package:angular/angular.dart';

import '../service/culture_story.dart';
import '../service/culture.dart';
import '../service/query_service.dart';
import 'dart:html';
import 'dart:js' show context, JsObject;
import 'package:google_maps/google_maps.dart';

@Component(selector: 'add-culture', templateUrl: '../lib/component/add_culture_component.html', cssUrl: '../lib/component/add_culture_component.css', publishAs: 'addCultureCmp')
class AddCultureComponent implements AttachAware, ShadowRootAware {



  AddCultureComponent(RouteProvider routeProvider, this.queryService, this._http) {
   //todo 

  }

  @override
  onShadowRoot(ShadowRoot shadowRoot) {
    final mapOptions = new MapOptions()
      ..zoom = 8
      ..center = new LatLng(-34.397, 150.644)
      ..mapTypeId = MapTypeId.ROADMAP;
    var mapDiv = shadowRoot.querySelector("#map-canvas");
    final map = new GMap(mapDiv, mapOptions);
  }

  @override
  attach() {


  }
}
于 2014-07-18T08:19:13.050 回答
1

我设法通过让 city-ctrl 指令实现 NgAttachAware 接口方法 attach() 来完成这项工作，并从那里启动地图。构造函数显然是错误的地方。得出以下结论：

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

}
于 2014-01-11T14:50:43.007 回答
1

我的解决方案是在“AfterViewChecked”生命周期挂钩中加载地图数据，并在加载前使用空类型检查：

 class MapComponent implements AfterViewChecked {

 if (document.getElementById(‘map’) == null) {
  return;
 }

 ngAfterViewChecked() {
  GMap(
   document.getElementById(‘map’),
   MapOptions()
   ..center = LatLng(-34.397, 150.644)
   ..zoom = 8,
  );
 }}

这是我的文章，其中包含分步说明：

https://medium.com/@ababenko_95981/angulardart-google-maps-inside-component-1edb708ee68c

于 2021-09-08T20:20:42.140 回答