フラッタで地図を表示する

53021 ワード

dart javascript api flutter テキストリンク

JavaScriptリーフレットライブラリ機能を実装し、ユーザーがフラッタ画面内の複数のプロバイダからラスターマップを表示することができますオープンソースフラッタプラグインを使用して簡単なマップアプリケーションです.
過去数年間で、フラッタは、世界で最も人気のあるクロスプラットフォームフレームワークの一つとなっている.これは、ユーザーが1つのコードベース(DART言語を使用して)を使用してアプリケーションを作成することができますは、AndroidやIOS上で動作し、将来的には、Web上でも.
現在、TomTomは、TomTomマップを表示するためにフラッターのためにAndroidのために専用の地図SDKを持っていません.ために開発者を助けるために、我々はオープンソースフラッタプラグインを使用して簡単なマップアプリケーションを作成しました';flutterstricmap ';.プラグインはJavaScriptリーフレットライブラリ機能を実装し、ユーザーがフラッタ画面内の複数のプロバイダからラスターマップを表示することができます.

必要条件

アプリケーションの書き込みを開始するには、いくつかの手順を実行する必要があります.

最初にTomTom APIキーが必要です.あなたがAPIキーを持っていないならば、How to Get a TomTom API key tutorialを訪問して、1をつくってください.

フラッタをシステムにインストールし、パス変数に追加する必要があります.

フラッタをインストールするには、次のサイトからの指示を使用できます.

Android SDKと一緒にAndroidスタジオをインストールする必要があります.Android Studioをインストールするには、ガイドhttps://flutter.dev/docs/get-started/installに従ってください.

フラッターとDARTプラグインはAndroidスタジオアプリケーションにインストールされなければなりません
here

今フラッタドクターコマンドを実行することができます.それはすべての問題を見つけられない場合は、あなたが行って良いです!

新しいフラッタープロジェクトを作成する

新しいフラッターアプリケーションを作成するには、新しいフラッタープロジェクトを作成し、次の画面のように「フラッタアプリケーション」を選択する必要があります.

「次へ」をクリックし、アプリケーションに適切な名前を付け、すべてのパスが正しいことを確認します.

をクリックし、[完了]をクリックします.

その時点で、デフォルトのフラッタアプリケーションを実行できます.

マップの表示

アプリケーションが正しく動作している場合は、Pubspecに必要な依存関係を追加することでプロジェクトを変更できます.YAMLファイル.' flutterstricmap 'を追加し、HTTPパッケージを作成し、フラッタパブを実行します.

dependencies:
  flutter_map: 0.10.1+1
  http: 0.12.2

新しいパッケージがインストールされた後、ソースコードをメインに置き換えましょう.ファイルを表示するにはDARTファイルを指定します.次のコードスニペットは' FlutterMap 'ウィジェットを追加して、アムステルダムのTomTomオフィスに設定されている画面の中央に配置します.

import "package:flutter/material.dart";
import "package:flutter_map/flutter_map.dart";
import "package:latlong/latlong.dart"; 
import "package:http/http.dart" as http;
import "dart:convert" as convert;

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "Flutter Demo",
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatelessWidget {
  final String apiKey = "YOUR_API_KEY";

  @override
  Widget build(BuildContext context) {
    final tomtomHQ = new LatLng(52.376372, 4.908066);
    return MaterialApp(
      title: "TomTom Map",
      home: Scaffold(
        body: Center(
            child: Stack(
              children: <Widget>[
                FlutterMap(
                  options: new MapOptions(center: tomtomHQ, zoom: 13.0),
                  layers: [
                    new TileLayerOptions(
                      urlTemplate: "https://api.tomtom.com/map/1/tile/basic/main/"
                          "{z}/{x}/{y}.png?key={apiKey}",
                      additionalOptions: {"apiKey": apiKey},
                    )
                  ],
                )
              ],
            )),
      ),
    );
  }
}

マップにマーカーを追加する

マップにマーカーを追加するには、FlutterMapウィジェット内に追加マーカー層を追加する必要があります.

FlutterMap(
  options: new MapOptions(center: tomtomHQ, zoom: 13.0),
  layers: [
    new TileLayerOptions(
      urlTemplate: "https://api.tomtom.com/map/1/tile/basic/main/"
          "{z}/{x}/{y}.png?key={apiKey}",
      additionalOptions: {"apiKey": apiKey},
    ),
    new MarkerLayerOptions(
      markers: [
        new Marker(
          width: 80.0,
          height: 80.0,
          point: tomtomHQ,
          builder: (BuildContext context) => const Icon(
              Icons.location_on,
              size: 60.0,
              color: Colors.black),
        ),
      ],
    ),
  ],
)

Tomtomロゴ画像の追加

TomTom Maps APIの条件に従って、開発者もアプリケーションにTomTomロゴを追加する必要があります. からイメージをダウンロードして、新しく作成したイメージフォルダに置きましょう.
https://d221h2fa9j1k6s.cloudfront.net/tomtom-guides/flutter-map-example/tt_logo.png
新しく作成されたロゴをアプリケーションで使用するには、新しい資産をPubspec内に追加する必要があります.「フラッタ」セクションの中のYAML

assets:

  - images/tt_logo.png

今、イメージは、FlutterMapウィジェットの横にあるスタックウィジェットの新しい子として追加できます.イメージは、画面上で簡単に配置できるようにコンテナ内にラップされます.

@override
Widget build(BuildContext context) {
  final tomtomHQ = new LatLng(52.376372, 4.908066);
  return MaterialApp(
    title: "TomTom Map",
    home: Scaffold(
      body: Center(
          child: Stack(
            children: <Widget>[
              FlutterMap(
                options: new MapOptions(center: tomtomHQ, zoom: 13.0),
                layers: [
                  new TileLayerOptions(
                    urlTemplate: "https://api.tomtom.com/map/1/tile/basic/main/"
                        "{z}/{x}/{y}.png?key={apiKey}",
                    additionalOptions: {"apiKey": apiKey},
                  ),
                  new MarkerLayerOptions(
                    markers: [
                      new Marker(
                        width: 80.0,
                        height: 80.0,
                        point: new LatLng(52.376372, 4.908066),
                        builder: (BuildContext context) => const Icon(
                            Icons.location_on,
                            size: 60.0,
                            color: Colors.black),
                      ),
                    ],
                  ),
                ],
              ),
              Container(
                  padding: EdgeInsets.all(20),
                  alignment: Alignment.bottomLeft,
                  child: Image.asset("images/tt_logo.png"))
            ],
          )),
    ),
  );
}

ファイルを保存した後、次の画面のように、画面の左下側にTomTomロゴが表示されます.

TomTom著作権APIの実装

条件に従って、開発者は同様に著作権APIを実装する必要があります.のは、ホームセクションのアプリケーションのscaffoldウィジェットに単純なフローティングアクションボタンを追加することによってです

@override
Widget build(BuildContext context) {
  final tomtomHQ = new LatLng(52.376372, 4.908066);
  return MaterialApp(
    title: "TomTom Map",
    home: Scaffold(
      body: Center(
          child: Stack(
            children: <Widget>[
              FlutterMap(
                options: new MapOptions(center: tomtomHQ, zoom: 13.0),
                layers: [
                  new TileLayerOptions(
                    urlTemplate: "https://api.tomtom.com/map/1/tile/basic/main/"
                        "{z}/{x}/{y}.png?key={apiKey}",
                    additionalOptions: {"apiKey": apiKey},
                  ),
                  new MarkerLayerOptions(
                    markers: [
                      new Marker(
                        width: 80.0,
                        height: 80.0,
                        point: new LatLng(52.376372, 4.908066),
                        builder: (BuildContext context) => const Icon(
                            Icons.location_on,
                            size: 60.0,
                            color: Colors.black),
                      ),
                    ],
                  ),
                ],
              ),
              Container(
                  padding: EdgeInsets.all(20),
                  alignment: Alignment.bottomLeft,
                  child: Image.asset("images/tt_logo.png"))
            ],
          )),
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.copyright),
        onPressed: () async {
        },
      ),
    ),
  );
}

新しいフローティングアクションボタンは、次のようにアプリケーション画面に表示されます

今、スクロール可能なテキストを表示する単純なウィジェットを含む新しいファイルを追加しましょう.

新しく追加されたCopyRightSenseページに次のソースコードを入れます.ダーツファイル

import 'package:flutter/material.dart';

class CopyrightsPage extends StatelessWidget {
  final String copyrightsText;

  CopyrightsPage({Key key, @required this.copyrightsText}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("TomTom Maps API - Copyrights"),
      ),
      body: Container(
        child: Column(
          children: [
            Expanded(
                child: SingleChildScrollView(
                  child: Container(
                      padding: EdgeInsets.all(20), child: Text(copyrightsText)),
                )),
          ],
        ),
      ),
    );
  }
}

そして、新しいcopyRightSenseページをインポートします.メインの内部のダーツファイル.ダート

import "package:flutter_app/copyrights_page.dart";

では、TomTom Copyright APIを使用して、GetCopyRightsJSONResponse ()メソッドを作成し、フローティングアクションボタンを押すと呼び出します.

 @override
  Widget build(BuildContext context) {
    final tomtomHQ = new LatLng(52.376372, 4.908066);
    return MaterialApp(
      title: "TomTom Map",
      home: Scaffold(
        body: Center(
            child: Stack(
              children: <Widget>[
                FlutterMap(
                  options: new MapOptions(center: tomtomHQ, zoom: 13.0),
                  layers: [
                    new TileLayerOptions(
                      urlTemplate: "https://api.tomtom.com/map/1/tile/basic/main/"
                          "{z}/{x}/{y}.png?key={apiKey}",
                      additionalOptions: {"apiKey": apiKey},
                    ),
                    new MarkerLayerOptions(
                      markers: [
                        new Marker(
                          width: 80.0,
                          height: 80.0,
                          point: new LatLng(52.376372, 4.908066),
                          builder: (BuildContext context) => const Icon(
                              Icons.location_on,
                              size: 60.0,
                              color: Colors.black),
                        ),
                      ],
                    ),
                  ],
                ),
                Container(
                    padding: EdgeInsets.all(20),
                    alignment: Alignment.bottomLeft,
                    child: Image.asset("images/tt_logo.png"))
              ],
            )),
        floatingActionButton: FloatingActionButton(
          child: Icon(Icons.copyright),
          onPressed: () async {
            http.Response response = await getCopyrightsJSONResponse();
          },
        ),
      ),
    );
  }

  Future<http.Response> getCopyrightsJSONResponse() async {
    var url = "https://api.tomtom.com/map/1/copyrights.json?key=$apiKey";
    var response = await http.get(url);
    return response;
  }

}

APIからの応答を解析するには、ParseSergionsPopyrightおよびParseGeneralCopyrightのようないくつかのヘルパーメソッドとともにParsecopyRightResponseメソッドを作成します.解析結果を著作権画面に渡し、ナビゲータを使用して呼び出します.

import "package:flutter/material.dart";
import "package:flutter_map/flutter_map.dart";
import "package:latlong/latlong.dart";
import "package:http/http.dart" as http;
import "dart:convert" as convert;
import "package:flutter_app/copyrights_page.dart";

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "Flutter Demo",
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatelessWidget {
  final String apiKey = "YOUR_API_KEY";

  @override
  Widget build(BuildContext context) {
    final tomtomHQ = new LatLng(52.376372, 4.908066);
    return MaterialApp(
      title: "TomTom Map",
      home: Scaffold(
        body: Center(
            child: Stack(
              children: <Widget>[
                FlutterMap(
                  options: new MapOptions(center: tomtomHQ, zoom: 13.0),
                  layers: [
                    new TileLayerOptions(
                      urlTemplate: "https://api.tomtom.com/map/1/tile/basic/main/"
                          "{z}/{x}/{y}.png?key={apiKey}",
                      additionalOptions: {"apiKey": apiKey},
                    ),
                    new MarkerLayerOptions(
                      markers: [
                        new Marker(
                          width: 80.0,
                          height: 80.0,
                          point: new LatLng(52.376372, 4.908066),
                          builder: (BuildContext context) => const Icon(
                              Icons.location_on,
                              size: 60.0,
                              color: Colors.black),
                        ),
                      ],
                    ),
                  ],
                ),
                Container(
                    padding: EdgeInsets.all(20),
                    alignment: Alignment.bottomLeft,
                    child: Image.asset("images/tt_logo.png"))
              ],
            )),
        floatingActionButton: FloatingActionButton(
          child: Icon(Icons.copyright),
          onPressed: () async {
            http.Response response = await getCopyrightsJSONResponse();

            Navigator.push(
                context,
                MaterialPageRoute(
                    builder: (context) => CopyrightsPage(
                        copyrightsText: parseCopyrightsResponse(response))));
          },
        ),
      ),
    );
  }

  Future<http.Response> getCopyrightsJSONResponse() async {
    var url = "https://api.tomtom.com/map/1/copyrights.json?key=$apiKey";
    var response = await http.get(url);
    return response;
  }

  String parseCopyrightsResponse(http.Response response) {
    if (response.statusCode == 200) {
      StringBuffer stringBuffer = StringBuffer();
      var jsonResponse = convert.jsonDecode(response.body);
      parseGeneralCopyrights(jsonResponse, stringBuffer);
      parseRegionsCopyrights(jsonResponse, stringBuffer);
      return stringBuffer.toString();
    }
    return "Can't get copyrights";
  }

  void parseRegionsCopyrights(jsonResponse, StringBuffer sb) {
    List<dynamic> copyrightsRegions = jsonResponse["regions"];
    copyrightsRegions.forEach((element) {
      sb.writeln(element["country"]["label"]);
      List<dynamic> cpy = element["copyrights"];
      cpy.forEach((e) {
        sb.writeln(e);
      });
      sb.writeln("");
    });
  }

  void parseGeneralCopyrights(jsonResponse, StringBuffer sb) {
    List<dynamic> generalCopyrights = jsonResponse["generalCopyrights"];
    generalCopyrights.forEach((element) {
      sb.writeln(element);
      sb.writeln("");
    });
    sb.writeln("");
  }
}

今すぐ著作権表示画面が表示されます.

.
ハッピーコーディング!
この記事はもともとThe full source code of the application can be found here in our GitHubに掲載された.原作の著者はMateusz Szczepa Lung Czykです.
より多くのチュートリアル、ツールキット、デモ、および詳細については、https://developer.tomtom.com/blogをチェックしてください.無料のAPIキーを取得し、今日の建物を取得します.

Reference

この問題について(フラッタで地図を表示する), 我々は、より多くの情報をここで見つけました https://dev.to/tomtomdevs/displaying-maps-with-flutter-37ai

テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。

Collection and Share based on the CC Protocol

UbuntuでのRabbitvcsインストール構成

BOJ:移動[15989]