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

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

@component で Günter Zöchbauer によって提案されたソリューションを試してみましたが、それでも機能しません (おそらく間違いを犯した可能性があります)。その後、gogole マップが shadwo dom にあることに気付きました。 onShadowRoot メソッドで Google マップを表示します。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 に答える