如何使用飞镖里面的聚合物元素的JavaScript [英] How to use javascript from Dart inside a polymer element
问题描述
我正尝试修改示例谷歌地图以在其中工作一种聚合物元素。在运行下面的代码我没有看到除标题以外的任何内容，并且没有任何错误。请告诉我如何才能完成这项工作。
在较长时间内，我想用google-chart api和Polymer dart来定义其他组件。有人可以指点我一个成功的例子。
index.html
<！DOCTYPE html>
< html>
< head>
< meta charset =utf-8>
< meta name =viewportcontent =width = device-width，initial-scale = 1.0>
< title> DEMO< / title>
< script type =text / javascriptsrc =packages / web_components / platform.js>< / script>
< link rel =importhref =lib_elements / googlemapcanvas / googlemapcanvas.html>
< script type =text / javascript
src =https://maps.googleapis.com/maps/api/js?sensor=false>
< / script>
< / head>
< body>
< h1>试用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
<！ - 导入聚合物元素的定义 - >
< link rel =importhref =packages / polymer / polymer.html>
< polymer-element name =google-map-canvasattributes =title>
< template>
< style>
＃google-map-canvas {
height：100％
}
< / style>
< h1> {{title}}< / h1>
< div id =google-map-canvas>< / div>
< / template>
< script type =application / dartsrc =googlemapcanvas.dart>< / script>
< / polymer-element>
googlemapcanvas.dart
import'package：polymer / polymer.dart';
导入'dart：js'为js;
导入'dart：html';
/ **
*聚合物点击计数器元素。
* /
@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'];
$ b $ var mapOptions = new js.JsObject.jsify（{
center：center，
zoom：8，
mapTypeId：mapTypeId
}）;
new js.JsObject（google_maps ['Map']，[googlemapcanvas，mapOptions]）;
$ b
这是一个CSS问题，可能特定于Polymer，但CSS问题完全相同。有几件事你可以做。最简单的方法是将fullbleed作为属性添加到< body>。
< body unresolved fullbleed>
< / body>
您的地图将显示出来，占据剩余空间。或者，您可以指定google-map-canvas元素的高度，使其像像素一样具有像素高度。
< polymer-元素...>
< template>
< style>
：主机{
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地图API是否是Dart的一个端口？
https://pub.dartlang.org/packages/google_maps
I am trying to modify sample-google-maps to work inside a polymer element. On running following code I don't see anything except the title and there are no errors.Please advise how can I make this work.
In longer run I want to define additional components using google-chart api and Polymer dart. Can someone point me to a worked out example.
index.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]);
}
}
This is a CSS problem, maybe specific to Polymer, but a CSS problem all the same. There are several things you can do. The simplest one is to add fullbleed as an attribute to <body>.
<body unresolved fullbleed>
</body>
And your map will show up, taking up the rest of the space available. Or you can specify the height of your google-map-canvas element to have a height in pixels like so
<polymer-element ...>
<template>
<style>
:host {
height: 500px;
}
...
</style>
...
</template>
</polymer-element>
And the map will fill the space left after the title you put just before it. But it will not go beyond the 500px that you gave the element. There are other tricks you could do. I'd look at this site for more ways to layout polymer elements
https://www.polymer-project.org/docs/polymer/layout-attrs.html
And a guide to style polymer elements
https://www.polymer-project.org/docs/polymer/styling.html
Hope that answers your questions.
By the way, you do know the is a port of Google maps API to Dart?
https://pub.dartlang.org/packages/google_maps
这篇关于如何使用飞镖里面的聚合物元素的JavaScript的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
