Question

我正在尝试将google地图库与我一直在尝试构建的dart应用程序集成，它也使用web_ui，所有我得到的是很多非常令人沮丧的错误。我在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

代码中发生的事情是，当渲染组件时，我会处理自定义的“Alert”对象并使用它来构建具有此功能的地图：

  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。

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

1 个答案: