以稍微复杂的方式使用 Dart、Web_UI 和 Google Maps

Question

我正在尝试将 google 地图库与我一直在尝试构建的也使用 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 文件的主要方法只有几页。

任何建议都会很棒！

谢谢！

Answer 1

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

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

见BREAKING CHANGE: js-interop will require extra script in html。