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 に答える