2

我正在尝试修改sample-google-maps以在聚合物元素内工作。在运行以下代码时，除了标题之外我什么都看不到，也没有任何错误。请告知我该如何进行这项工作。

从长远来看，我想使用 google-chart api 和 Polymer dart 定义其他组件。有人可以给我指出一个可行的例子。

索引.html

<!DOCTYPE html>

<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DEMO</title>
    <script type="text/javascript" src="packages/web_components/platform.js"></script>
    <link rel="import" href="lib_elements/googlemapcanvas/googlemapcanvas.html">

  <script type="text/javascript"
    src="https://maps.googleapis.com/maps/api/js?sensor=false">
  </script>
  </head>

  <body>   
    <h1> Trial for Charted Library</h1>

    <google-map-canvas></google-map-canvas>

    <!-- bootstrap polymer -->
    <script type="application/dart">export 'package:polymer/init.dart';</script>
    <script src="packages/browser/dart.js"></script>
    <script src="packages/browser/interop.js"></script>
  </body>
</html>

googlemapcanvas.html

<!-- import polymer-element's definition -->
<link rel="import" href="packages/polymer/polymer.html">

<polymer-element name="google-map-canvas" attributes="title">

  <template>
  <style>
      #google-map-canvas {
          height:100%
      }
  </style>
  <h1>{{title}}</h1>
  <div id="google-map-canvas"></div>
  </template>
  <script type="application/dart" src="googlemapcanvas.dart"></script>
</polymer-element>

googlemapcanvas.dart

import 'package:polymer/polymer.dart';
import 'dart:js' as js;
import 'dart:html';
/**
 * A Polymer click counter element.
 */
@CustomTag('google-map-canvas')
class GoogleMapCanvas extends PolymerElement{

  @published String title = "Google Map Canvas";
  DivElement googlemapcanvas;


  GoogleMapCanvas.created(): super.created(){

  }

  @override
  void attached(){
    googlemapcanvas = $['google-map-canvas'];
    draw();
  }

  draw(){
    final google_maps = js.context['google']['maps'];
    var center = new js.JsObject(google_maps['LatLng'], [-34.397, 150.644]);
    var mapTypeId = google_maps['MapTypeId']['ROADMAP'];

    var mapOptions = new js.JsObject.jsify({
        "center": center,
        "zoom": 8,
        "mapTypeId": mapTypeId
    });

    new js.JsObject(google_maps['Map'],[googlemapcanvas, mapOptions]);

  }
}
4

1 回答 1

1

这是一个 CSS 问题，可能是 Polymer 特有的，但仍然是一个 CSS 问题。您可以做几件事。最简单的一种是将fullbleed 作为属性添加到<body>。

<body unresolved fullbleed>

</body>

您的地图将显示出来，占用剩余的可用空间。或者您可以指定 google-map-canvas 元素的高度，使其具有像素高度，如下所示

<polymer-element ...>
    <template>
        <style>
            :host {
               height: 500px;
            }
            ...
        </style>
        ...
    </template>
</polymer-element>

并且地图将填充您在其前面放置的标题之后留下的空间。但它不会超过你给元素的 500px。您还可以使用其他技巧。我会在这个网站上查看更多布局聚合物元素的方法

https://www.polymer-project.org/docs/polymer/layout-attrs.html

以及聚合物元素样式指南

https://www.polymer-project.org/docs/polymer/styling.html

希望能回答你的问题。

顺便说一句，您知道 Google maps API 到 Dart 的一个端口吗？

https://pub.dartlang.org/packages/google_maps

于 2015-01-29T01:06:50.380 回答