0

我正在尝试将谷歌地图库与我一直在尝试构建的也使用 web_ui 的 dart 应用程序集成，我得到的只是很多非常令人沮丧的错误。我在 github上的dart google maps example下载了示例，这些示例运行良好。

然而，当我尝试将它整合到一个“真正的”应用程序中时，没有任何效果。以下是我得到的错误：

Breaking on exception: ReferenceError: ReceivePortSync is not defined

Uncaught ReferenceError: ReceivePortSync is not defined
  ProxiedObjectTable (:54:21)
   (:195:28)
   (:567:3)
Breaking on exception: The null object does not have a method 'callSync'.

Exception: The null object does not have a method 'callSync'.

NoSuchMethodError : method not found: 'callSync'
Receiver: null
Arguments: [GrowableObjectArray len:0]
  Object.noSuchMethod (dart:core-patch/object_patch.dart:20:25)
  _enterScope (package:js/js.dart:756:35)
  scoped (package:js/js.dart:745:26)
  AlertDetailsComponent.renderMap (http://127.0.0.1:3030/Users/ao85407/Development/Dart/BDProjects/adminConsoleV2/web/out/AlertDetails.dart:381:14)
  AlertDetailsComponent.loadAlertDetailsData (http://127.0.0.1:3030/Users/ao85407/Development/Dart/BDProjects/adminConsoleV2/web/out/AlertDetails.dart:321:25)
  AlertsBodyComponent.viewAlertDetails (http://127.0.0.1:3030/Users/ao85407/Development/Dart/BDProjects/adminConsoleV2/web/out/AlertsBody.dart:232:36)
  AlertsBodyComponent.created_autogenerated.<anonymous closure>.<anonymous closure> (http://127.0.0.1:3030/Users/ao85407/Development/Dart/BDProjects/adminConsoleV2/web/out/AlertsBody.dart:146:60)
  Template.listen.<anonymous closure> (package:web_ui/templating.dart:426:53)
  _enterScope (package:js/js.dart:756:35)
  scoped (package:js/js.dart:745:26)
Exception: The null object does not have a method 'callSync'.

NoSuchMethodError : method not found: 'callSync'
Receiver: null
Arguments: [GrowableObjectArray len:0]
  Object.noSuchMethod (dart:core-patch/object_patch.dart:20:25)
  _enterScope (package:js/js.dart:756:35)
  scoped (package:js/js.dart:745:26)
  AlertDetailsComponent.renderMap (http://127.0.0.1:3030/Users/ao85407/Development/Dart/BDProjects/adminConsoleV2/web/out/AlertDetails.dart:381:14)
  AlertDetailsComponent.loadAlertDetailsData (http://127.0.0.1:3030/Users/ao85407/Development/Dart/BDProjects/adminConsoleV2/web/out/AlertDetails.dart:321:25)
  AlertsBodyComponent.viewAlertDetails (http://127.0.0.1:3030/Users/ao85407/Development/Dart/BDProjects/adminConsoleV2/web/out/AlertsBody.dart:232:36)
  AlertsBodyComponent.created_autogenerated.<anonymous closure>.<anonymous closure> (http://127.0.0.1:3030/Users/ao85407/Development/Dart/BDProjects/adminConsoleV2/web/out/AlertsBody.dart:146:60)
  Template.listen.<anonymous closure> (package:web_ui/templating.dart:426:53)
  _enterScope (package:js/js.dart:756:35)
  scoped (package:js/js.dart:745:26)
Failed to load resource: the server responded with a status of 404 (Not Found)
  http://127.0.0.1:3030/Users/ao85407/Development/Dart/BDProjects/adminConsoleV2/web/out/js/jquery.js
Failed to load resource: the server responded with a status of 404 (Not Found)
  http://127.0.0.1:3030/Users/ao85407/Development/Dart/BDProjects/adminConsoleV2/web/out/js/bootstrap.js

代码中发生的是，当组件被渲染时，我得到了一个自定义“警报”对象的句柄，并使用它来构建一个带有这个函数的地图：

  Object renderMap(Alert alert)
  {
    final lat = double.parse(alert.latitude);
    final lng = double.parse(alert.longitude);

    final mapOptions = new MapOptions()
              ..zoom = 14
              ..center = new LatLng(lat, lng)
              ..mapTypeId = MapTypeId.ROADMAP;

    final map = new GMap(query("#map-canvas"), mapOptions);
    js.retain(map);

    //clever troubleshooting/debugging methods
    map.onZoomChanged.listen((ignored)
        {
          print ('zoom: ${map.zoom}');
        });
    return map;
  }

当我尝试创建 MapOptions 并且我尝试过的任何方法都不起作用时，就会发生崩溃。我猜它与页面生命周期以及加载库的时间有关，因为我距离应用程序 dart 文件的主要方法只有几页。

任何建议都会很棒！

谢谢！

4

1 回答 1

0

您必须在页面上使用以下 Js 脚本才能使用js-interop：

<script src="packages/browser/interop.js"></script>

请参阅BREAKING CHANGE：js-interop 将需要 html 中的额外脚本。

于 2013-09-05T19:01:07.157 回答