如何在聚合元素中使用来自Dart的javascript
我正在尝试修改以在聚合物元素中工作。在运行下面的代码时,除了标题之外,我什么都看不到,也没有错误。请告诉我如何才能做到这一点 从长远来看,我想使用GoogleChartAPI和PolymerDart定义其他组件。有人能给我举一个已经解决的例子吗 index.html如何在聚合元素中使用来自Dart的javascript,javascript,google-maps,dart,dart-polymer,dart-js-interop,Javascript,Google Maps,Dart,Dart Polymer,Dart Js Interop,我正在尝试修改以在聚合物元素中工作。在运行下面的代码时,除了标题之外,我什么都看不到,也没有错误。请告诉我如何才能做到这一点 从长远来看,我想使用GoogleChartAPI和PolymerDart定义其他组件。有人能给我举一个已经解决的例子吗 index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" con
<!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>
这是一个CSS问题,可能特定于聚合物,但仍然是一个CSS问题。你可以做几件事。最简单的方法是将fullbleed作为属性添加到
您的地图将显示出来,占用剩余的可用空间。或者您可以指定GoogleMapCanvas元素的高度,以像素为单位,如下所示
<polymer-element ...>
<template>
<style>
:host {
height: 500px;
}
...
</style>
...
</template>
</polymer-element>
:主持人{
高度:500px;
}
...
...
地图会填满你放在它前面的标题后面的空间。但它不会超过你给元素的500px。你还可以做其他的把戏。我会在这个网站上寻找更多的方法来布局聚合物元素
以及聚合物元素的样式指南
希望这能回答你的问题
顺便问一下,您知道Google maps API是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]);
}
}
<body unresolved fullbleed>
</body>
<polymer-element ...>
<template>
<style>
:host {
height: 500px;
}
...
</style>
...
</template>
</polymer-element>