Dart JS 0.6 与 Leaflet Js 互操作导致类型错误

Question

我正在尝试使用 js 0.6.0 interrop 库从 Dart 使用 LeafletJS。我创建了以下 Dart 文件来映射基本 Leaflet 地图的构造。

@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 如下所示，包含 leaflet.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 库，不胜感激。

Answer 1

你面临一个 known issue 基本上是关于与缩小的 dart2js 名称的冲突。

Answer 2

我认为这应该可以满足您的需求

@JS("L")
library leaflet;

import "dart:html";
import "package:js/js.dart";

@JS("map")
external map(String str);

虽然我不知道函数是什么returns。

Dart JS 0.6 与 Leaflet Js 互操作导致类型错误

Dart JS 0.6 interrop with Leafletjs resulting in type error

dart

dart-js-interop