在angular.dart视图中加载谷歌地图（ng-view） [英] loading google map in angular.dart view (ng-view)

问题描述

我尝试在 c> c> angular.dart 中使用多个视图创建一个单页应用程序，但我找不到加载的工作示例

我使用 google_maps 包。当在 index.html 页面中定义包含地图的 div 元素时，当在视图中定义映射div时抛出异常：

 'TypeError：无法读取null的属性'offsetWidth'
  

我想这意味着在加载指令类时，视图还没有被渲染。如何在视图中加载地图？

这里是路由器：

< >
class DefaultRouteInitializer实现RouteInitializer {

init（路由器路由器，ViewFactory视图）{
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_canvasstyle =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）; 
} 
 
} 
  

解决方案

我尝试了GünterZöchbauer提出的解决方案在我的@component。但它仍然不工作（也许我犯了一个错误），然后我注意到我的gogole地图是在shadwo dom.so我可以实现ShadowRootAware类和onShadowRoot方法来显示google地图。因为onShadowRoot方法将被调用，直到html元素加载。
这里是组件html：

  ; div id =addculture> 
 ...一些代码
< div id =map-canvas>< / div> 
 ...一些代码
< / div> 
  

这里是组件dart文件：

< pre class =lang-dart prettyprint-override> 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（）{


}
}


I am trying to create a single page app in angular.dart with multiple views, but I cant find a working example of loading up a Google Map in a view being routed into.

I am using the google_maps package. It works out fine when the div element to contain the map is defined in the main index.html page, but an exception is thrown when the map div is defined in the view:

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

I suppose this means the view has not been rendered by the time the directive class is loading. How should one load a Map in a view?

Here is the router:

@InjectableService()
class DefaultRouteInitializer implements RouteInitializer {

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

And the 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>

And the Directive class having issues creating the actual 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);
  }

}

解决方案

I tried the solution proposed by Günter Zöchbauer in my @component .but It still not works(Maybe I made some mistake),after that I noticed that the my gogole map is in the shadwo dom.so I can implement the ShadowRootAware class and it's on onShadowRoot method to show google map .because onShadowRoot method will be called untill the html elements are load. here is the component html:

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

and here is the component dart file:

  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() {


  }
}

这篇关于在angular.dart视图中加载谷歌地图（ng-view）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！