Dart JS 0.6 与 Leafletjs 的交互导致类型错误



我正在尝试使用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);

我不知道函数返回什么。

最新更新