google-maps - Dart + Polymer + google_maps

Question

我试图写一个聚合物元素负责绘制谷歌 map 表示。

这是代码:

@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中添加了javascript标签，而不在聚合物元素声明中添加了javascript标签。
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
我的尝试是在 https://github.com/carlosvin/snowroute中，此问题的相关文件是:web / map_element.dart，web / map_element.html和web / 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，但您必须将其实际应用于尺寸并查看 map ，但这是另一个问题，我已经在这里回答了 How to use javascript from Dart inside a polymer element。