2
sample-google-maps을 수정하여 폴리머 요소 내부에서 작업하려고합니다. 다음 코드를 실행하면 제목을 제외한 아무 것도 보이지 않으며 오류가 없습니다. 어떻게이 작업을 수행 할 수 있는지 알려주십시오.폴리머 요소 내부의 다트에서 javascript를 사용하는 방법
google-chart api와 Polymer dart를 사용하여 추가 구성 요소를 정의하고 싶습니다. 누군가 나를 해결할 수있는 예를 가리킬 수 있습니까?
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>
이것은 CSS 문제, 폴리머에 아마도 특정하지만 모든 CSS 문제입니다
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]);
}
}