Question

我正在尝试编写一个负责绘制谷歌地图表示的聚合物元素。

这是代码：

@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标记，而不是在聚合物元素声明中。

<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，但您必须应用实际尺寸并查看地图，这是另一个问题，我已在此处回答How to use javascript from Dart inside a polymer element。

Dart + Polymer + google_maps

1 个答案: