Dart + Polymer + google_maps

Question

Я пытаюсь написать полимерный элемент, отвечающий за рисование представления карт Google.

Это код:

@CustomTag('map-element') 
class MapElement extends PolymerElement { 
    ... 

    @override 
    void attached() { 
    super.attached(); 
    canvasMap = $['canvas_map']; 
    initMap(); 
    window.navigator.geolocation.watchPosition(enableHighAccuracy: true) 
      .listen(
       (Geoposition position) {addPosition(position);}, 
       onError: (error) => handleError(error)); 
    } 
    ... 

    void initMap(){ 
    gmap = new GMap(
     canvasMap, 
      new MapOptions() 
      ..zoom = 4 
      ..center = new LatLng(0, 0) 
      ..mapTypeId = MapTypeId.ROADMAP 
     ); 

    line = new Polyline(
     new PolylineOptions() 
      ..map = gmap 
      ..strokeColor='#0022ee' 
      ..geodesic=true 
      ..strokeOpacity=0.7 
      ..strokeWeight=2 
      ..visible=true); 
    } 

} 

И это исключение генерируется, когда я пытаюсь создать экземпляр GMAP:

Class 'GElement' has no instance method '[]'. 

NoSuchMethodError: method not found: '[]' 
Receiver: Instance of 'GElement' 
Arguments: ["maps"] 

Я думаю, что проблема в том, что полимер использует DOM тень, знаете ли вы какое-нибудь обходное решение?

Вот весь проект: https://github.com/carlosvin/snowroute

---

Сейчас он работает, здесь вы можете попробовать: http://carlosvin.github.io/snowroute/

Я добавил тег яваскрипта только в index.html, а не в объявлении элемента полимера ,

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>

Моя попытка в https://github.com/carlosvin/snowroute, соответствующие файлы для этого вопроса являются: веб/map_element.dart, веб/map_element.html и веб/index.html.

Answer 1

Просто, вы просто отсутствует тег JavaScript

<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script> 

Я также попытался сделать то, что вы делаете, и забыл включить это, и получил ту же ошибку. Я нашел, что вы можете включить его здесь

<polymer-element name="map-element"> 
    <template> 
    <div id="canvas_map"></div> 
    </template> 
    <script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script> 
    <script type="application/dart" src="map_element.dart"></script> 
</polymer-element> 

Или вы можете включить его в основной файл index.html.

Хотя это не реализует CSS, который вы должны применить к фактическому размеру и увидеть карту, это другой вопрос, на который я уже ответил здесь How to use javascript from Dart inside a polymer element.