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

问题描述

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

我正在使用 google_maps 包.当在主 index.html 页面中定义包含地图的 div 元素时，效果很好，但是在视图中定义地图 div 时会抛出异常:

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

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

这是路由器:

@InjectableService()类 DefaultRouteInitializer 实现 RouteInitializer {init(路由器路由器，ViewFactory视图){路由器根目录..添加路由(name: '城市',路径:'/城市'，输入: view('view/city_view.html'));}}

和视图 html:

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

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

import 'dart:html';导入'包:角度/角度.dart';导入包:google_maps/google_maps.dart"；@NgDirective(选择器:'[city-ctrl]')类城市控制器{城市控制器(){最终 mapOptions = new MapOptions()..缩放 = 8..center = new LatLng(-34.397, 150.644)..mapTypeId = MapTypeId.ROADMAP;最终地图 = new GMap(querySelector("#city_map_canvas"), mapOptions);}}

解决方案

我的解决方案是在AfterViewChecked"中加载地图数据Lifecycle Hook 并在加载前使用空类型检查:

 类 MapComponent 实现 AfterViewChecked {if (document.getElementById(‘map’) == null) {返回;}ngAfterViewChecked() {地图(document.getElementById(‘map’),地图选项()..center = LatLng(-34.397, 150.644)..缩放= 8，);}}

这是我的文章，附有分步说明:

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

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

}

解决方案

My solution is to load map data in "AfterViewChecked" Lifecycle Hook and to use null-type check before loading:

 class MapComponent implements AfterViewChecked {

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

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

Here is my article with step-by-step instructions:

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

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