3

有没有办法在 dart 项目中使用 JS api 和 Google Maps JavaScript API、dojo 等框架。指向一些样本的指针会很好。

4

2 回答 2

5

我使用了 Alexandre Ardhuin 的google_maps包。将其安装为依赖项：

dependencies:
  google_maps: any

然后在 HTML 中导入几个文件：

<head>
  <script src="http://maps.googleapis.com/maps/api/js?v=3.10&sensor=false"></script>
  <link href="https://google-developers.appspot.com/maps/documentation/javascript/examples/default.css" rel="stylesheet">
</head>

注意：我必须使用 JS API 的 3.10 版本——一定要在 URL 中指定（就像我上面所做的那样），直到包更新为使用最新版本。

然后是地图的实际 HTML 容器：

<div class="map" style="width: 640; height: 640px;"></div>

一些进口：

import 'dart:html';
import 'package:js/js.dart' as js;
import 'package:google_maps/js_wrap.dart' as jsw;
import 'package:google_maps/google_maps.dart';

然后是实际代码：

js.scoped(() {
  var mapOptions = new MapOptions()
    ..mapTypeId = MapTypeId.ROADMAP
    ..center = new LatLng(60.987097,25.767059)
    ..zoom = 6;

  var map = new GMap(_root.query(".map"), mapOptions);

  var marker = new Marker(
    new MarkerOptions()
      ..position = new LatLng(60.987097,25.767059)
      ..map = map
      ..title = 'Foo'
  );

  var content = new DivElement();
  content.innerHtml = '''
<h3>Foo</h3>

<p>bar</p>
''';

  var infoWindow = new InfoWindow(
    new InfoWindowOptions()
      ..content = content
  );

  marker.on.click.add((e) {
    infoWindow.open(map, marker);
  });

  jsw.retainAll([map, marker, infoWindow]);
});

结果是一张我标记了我的家乡城市的地图。

在此处输入图像描述

玩得开心！

于 2013-03-13T01:34:37.590 回答
0

您可以使用google_maps包来处理Google Maps JavaScript API v3。

处理 Js Api 可以使用js包。有关更多信息，请参阅使用 Dart 中的 JavaScript：js 库。

于 2013-03-12T20:49:09.103 回答