有没有办法在Dart项目中使用JS API和框架,比如Google Maps JavaScript API、dojo。提供一些示例会很好。
我使用了Alexandre Ardhuin的google_maps包。将其作为依赖项安装:
dependencies:
google_maps: any
然后在HTML中导入一些文件:
<head>
<script src="http://maps.googleapis.com/maps/api/js?v=3.10&sensor=false"></script>
<link href="https://google-developers.appspot.com/maps/documentation/javascript/examples/default.css" rel="stylesheet">
</head>
注意:我必须使用3.10版本的JS API -- 请务必在URL中指定该版本(就像上面我所做的那样),直到该软件包被更新以适用于最新版本。
然后是地图的实际HTML容器:
<div class="map" style="width: 640; height: 640px;"></div>
一些导入:
import 'dart:html';
import 'package:js/js.dart' as js;
import 'package:google_maps/js_wrap.dart' as jsw;
import 'package:google_maps/google_maps.dart';
js.scoped(() {
var mapOptions = new MapOptions()
..mapTypeId = MapTypeId.ROADMAP
..center = new LatLng(60.987097,25.767059)
..zoom = 6;
var map = new GMap(_root.query(".map"), mapOptions);
var marker = new Marker(
new MarkerOptions()
..position = new LatLng(60.987097,25.767059)
..map = map
..title = 'Foo'
);
var content = new DivElement();
content.innerHtml = '''
<h3>Foo</h3>
<p>bar</p>
''';
var infoWindow = new InfoWindow(
new InfoWindowOptions()
..content = content
);
marker.on.click.add((e) {
infoWindow.open(map, marker);
});
jsw.retainAll([map, marker, infoWindow]);
});
您可以使用google_maps软件包来处理Google Maps JavaScript API v3。
要处理Js Api,您可以使用js软件包。有关更多信息,请参见在Dart中使用JavaScript:js库。