裝載谷歌地圖

我試圖創建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

這是你如何解決它，或者是它仍然沒有工作？ –

裝載谷歌地圖

回答

相關問題