我正在尝试使用js 0.6.0 interrop库使用Dart的LeafletJS。我创建了以下Dart文件来映射基本传单地图的构建。
@JS("L")
library leaflet;
import "dart:html";
import "package:js/js.dart";
@JS("map")
class LeafletMap {
external factory LeafletMap(Element element);
}
然后,我在我的main.dart中使用这些类
import 'dart:html';
import 'package:charm/leaflet.dart';
main() {
var e = querySelector("#map");
var m = new LeafletMap(e);
}
这相当于下面的Javascript,它将创建和显示具有默认配置的地图。
var map = L.map('map');
HTML 如下所示,包括传单.js javascript 文件。
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" />
<script src="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script>
<script src="main.dart" type="application/dart"></script>
<script src="packages/browser/dart.js"></script>
</head>
<body>
<div id="map"></div>
</body>
</html>
浏览器控制台中显示以下错误:
Uncaught TypeError: L.map is not a function
但是,如果我直接在浏览器中使用控制台,L.map 就作为一个函数存在。不确定我是否正确使用了 JS interrop 库,并希望有任何指示。
您面临一个已知问题,该问题基本上是与缩小的 dart2js 名称发生冲突。
我认为这应该可以做你想要的
@JS("L")
library leaflet;
import "dart:html";
import "package:js/js.dart";
@JS("map")
external map(String str);
我不知道函数返回什么。