試験的なMapbox MapsのサポートをFlutterに追加するプラグインをリリースしました。数行のコードだけで、インタラクティブでカスタマイズ可能な地図をFlutterウィジェット内に埋め込むことができます。当社のデザイナーによる地図スタイルを追加するか、Studioで独自のスタイルを作成し、プラグインを使用してアプリで参照してください。

Flutterプラグインをインストールするには、https://pub.dartlang.org/packages/mapbox_glの手順に従ってください。ソースコードはhttps://github.com/mapbox/flutter-mapbox-glで入手できます。ここでは、開始するための追加のドキュメントと例を見つけることができます。

地図を追加

インタラクティブな地図をFlutterウィジェットに埋め込むには、MapboxOverlayを子として追加します。たとえば、次のスニペットは、ターゲットで指定された座標を中心としたDarkスタイルの地図を追加します。

child: new MapboxOverlay(
    controller: new MapboxOverlayController(),
    options: new MapboxMapOptions(
        style: Style.dark,
        camera: new CameraPosition(
            target: new LatLng(lat: 52.376316, lng: 4.897801),
            zoom: 15.0,
            bearing: 0.0,
            tilt: 0.0),
    ),
)

地図は他のUI Flutterコンポーネントと正しく統合されています。この例では、地図が3つのタブを持つタブ付きビューにどのように含めることができるかを確認できます。

このプラグインには、Flutter のローカル画面座標 (ユーザーが画面をタップした x,y 座標) から地図上の緯度と経度の値に変換するための API サポートも含まれています。

インタラクティブな地図を作成

このプラグインには、今日プラグインで構築できるインタラクションの一部を紹介するデモアプリが付属しています。動作をご覧ください。

これは、Flutterコミュニティから初期のフィードバックを収集するための実験的なプラグインであることに注意してください。 現在はAndroidのみをサポートしていますが、今後数週間で新機能を追加する予定です。GitHubリポジトリでの貢献を歓迎し、奨励します。

Google I/Oで私たちをお探しください

例年通り、Google I/Oに参加し、発表を楽しみます。Flutterプラグインについて質問がある場合、または地図と位置情報サービス向けの開発者プラットフォームについてチャットしたい場合は、DanまたはPabloに連絡してください。