我想在聚合物元素中显示Google地图。
此地图应从我的组件外部处理。
答案 0 :(得分：6)
以下是如何声明包含Google地图的简单自定义元素。在此示例中，必须在组件外部手动处理映射：
<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>
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文件中使用它（你使用元素上的map getter访问地图实例）：
<!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>
答案 1 :(得分：3)
Google现在已经创建了Google地图（聚合物）网络组件：
用法可以简单如下：
<google-map latitude="37.77493" longitude="-122.41942"></google-map>
另见Eric Bidelman关于Polymer的简短讲话（~9m），他在这里使用这个组件：http://youtu.be/eORqFaf_QzM?t=1m30s