9

我想在聚合物元素内显示谷歌地图。

应该从我的组件外部处理此地图。

4

2 回答 2

6

以下是如何声明一个包含谷歌地图的简单自定义元素。在此示例中，必须在组件之外手动处理地图：

  • gmap.html
<polymer-element name="gmap-map">
  <template>
    <div id='mapView' style='height: 500px; width: 500px'></div>
  </template>
  <script type="application/dart" src="gmap.dart"></script>
</polymer-element>
  • gmap.dart
import 'package:google_maps/google_maps.dart';
import 'package:polymer/polymer.dart';

@CustomTag('gmap-map')
class MapElement extends PolymerElement {
  GMap map;

  MapElement.created() : super.created() {
    final mapOptions = new MapOptions()
      ..mapTypeId = MapTypeId.ROADMAP;
    final mapView = getShadowRoot('gmap-map').querySelector("#mapView");
    map = new GMap(mapView, mapOptions);
  }

  attached() {
    super.attached();

    // this allow to notify the map that the size of the canvas has changed.
    // in some cases, the map behaves like it has a 0*0 size.
    event.trigger(map, 'resize', []);
  }
}

现在您可以在这样的 html 文件中使用它（您使用mapgetter on 元素访问地图实例）：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>GMaps app</title>
    <script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
    <link rel="import" href="gmap.html">
    <script type="application/dart">
import 'dart:html';
import 'gmap.dart' as m;
import 'package:google_maps/google_maps.dart';
import 'package:polymer/polymer.dart';
main(){
  initPolymer();
  m.MapElement mapElement = querySelector('#myMap');
  mapElement.map
    ..panTo(new LatLng(48, 2.5))
    ..zoom = 5;
}
    </script>
    <script src="packages/browser/dart.js"></script>
    <script src="packages/browser/interop.js"></script>
  </head>
  <body>
    <h1>Gmaps</h1>
    <gmap-map id='myMap'></gmap-map>
  </body>
</html>
于 2013-11-05T15:46:53.060 回答
3

Google 现在创建了一个 Google Maps (Polymer) Web 组件：

用法可以很简单： 

<google-map latitude="37.77493" longitude="-122.41942"></google-map>

另请参阅 Eric Bidelman 关于 Polymer 的简短（约 9m）演讲，他在其中使用此组件进行工作：http://youtu.be/eORqFaf_QzM?t= 1m30s

于 2014-07-10T10:14:13.180 回答