装载谷歌地图

我试图创建angular.dart与多个视图单页的应用程序，但我不能找到装载了一个工作示例谷歌地图在视图被路由到。装载谷歌地图

我正在使用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>

而指令类具有创建实际的地图问题：

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

}

来源

2014-01-11 user2636067

我设法让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); 
    } 

}

来源

2014-01-11 14:50:43 user2636067

我想在我的@Component由君特Zöchbauer提出的解决方案。但它仍然没有工作（也许是我弄错了），之后，我注意到我的gogole地图是在shadwo dom.so我可以实现ShadowRootAware类，它在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-18 08:19:13 Shawn

这是你如何解决它，或者是它仍然没有工作？ –

装载谷歌地图

回答

相关问题