떨림이 있는 지도 보이기

다음은 간단한 지도 프로그램으로 자바스크립트 전단지 라이브러리 기능을 실현하기 위해flatter 플러그인을 사용하여 여러 공급자의 울타리 지도를 flatter 화면에 표시할 수 있도록 합니다.
지난 몇 년 동안 떨림은 이미 세계에서 가장 유행하는 크로스플랫폼 구조 중의 하나가 되었다.이것은 사용자가 코드 라이브러리 (Dart 언어 사용) 를 사용하여 응용 프로그램을 만들 수 있도록 합니다. 이 코드 라이브러리는 안드로이드나 iOS에서 실행되고 앞으로도 웹에서 실행될 수 있습니다.
현재 TomTom에는 Flatter에서 TomTom 지도를 표시하는 Android 전용 Maps SDK가 없습니다.개발자를 돕기 위해 간단한 지도 응용 프로그램을 만들었습니다. "flatter\umap"이라는 소스 플러그인을 사용했습니다.이 플러그인은 자바스크립트 전단지 라이브러리 기능을 실현하고 사용자가 Flatter 화면에 여러 공급자의 울타리 지도를 표시할 수 있도록 합니다.

선결 조건

응용 프로그램 작성을 시작하려면 다음 단계를 수행해야 합니다.

먼저 TomTom API 키가 필요합니다.API 키가 없으면 How to Get a TomTom API key tutorial 에 액세스하여 생성합니다.

떨림은 시스템에 설치해야 하며 PATH 변수에 추가해야 합니다.

바이브레이션을 설치하려면 다음 사이트의 설명을 사용하십시오https://flutter.dev/docs/get-started/install.

시스템에 Android Studio와 Android SDK를 설치해야 합니다.Android Studio를 설치하려면 설명서here를 따릅니다.

Flight 및 Dart 플러그인은 아래 화면과 같이 Android Studio 응용 프로그램에 설치해야 합니다.

flatter-doctor 명령을 실행할 수 있습니다.그것이 아무런 문제도 발견하지 못했을 때, 너는 갈 수 있다.

새 떨림 항목 만들기

새 떨림 응용 프로그램을 만들려면 새 떨림 항목을 만들고 다음 화면과 같이 떨림 응용 프로그램을 선택해야 합니다.

다음을 클릭하고 응용 프로그램에 적절한 이름을 지정하여 모든 경로가 올바른지 확인합니다.

다음을 클릭하여 기본값을 모두 유지하고 완료를 클릭합니다.

이 때, 기본 예시 떨림 프로그램을 실행할 수 있어야 합니다.

TomTom 맵 표시

프로그램이 올바르게 실행되면pubspec에 필요한 의존항을 추가해서 항목을 수정할 수 있습니다.yaml 파일."flatter\u 맵", http 패키지를 추가하고 flatterpub를 실행하여 다음을 얻을 수 있습니다.

dependencies:
  flutter_map: 0.10.1+1
  http: 0.12.2

새 패키지를 설치한 후에 우리는 주로 원본 코드를 교체할 것이다.Dart 파일은 TomTom 맵을 표시합니다.아래의 코드 세션은 "flattermap"작은 위젯을 추가하여 화면 중앙에 배치합니다. 이 화면은 암스테르담의 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},
                    )
                  ],
                )
              ],
            )),
      ),
    );
  }
}

맵에 태그 추가

개발자는 맵에 태그를 추가하기 위해 FlightMap 작은 위젯에 태그 레이어를 추가하여 다음과 같이 보이도록 해야 합니다.

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

이제 flattermap 작은 위젯 옆에 그림을 창고 작은 위젯의 새 하위 단계로 추가할 수 있습니다.이미지는 화면에 쉽게 배치할 수 있도록 컨테이너에 포장됩니다.

@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 {
        },
      ),
    ),
  );
}

다음 그림과 같이 응용 프로그램 화면에 새 부동 작업 단추가 나타납니다.

이제 스크롤 가능한 텍스트를 표시하는 간단한 위젯을 포함하는 새 파일을 추가합니다.

새로 추가된copyrights_페이지에 다음 소스 코드를 넣으십시오.dart 파일:

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)),
                )),
          ],
        ),
      ),
    );
  }
}

새 저작권 페이지를 가져옵니다.주 파일의dart 파일입니다.던지기:

import "package:flutter_app/copyrights_page.dart";

이제 getCopyrightsJSONResponse () 를 만드는 방법으로 TomTom 저작권 API를 사용하고 부동 동작 단추를 눌렀을 때 호출합니다.

 @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의 응답을 분석하기 위해parseCopyrightsResponse 방법과 다른 보조 방법, 예를 들어parseRegionsCopyrights와parseGeneralCopyrights를 만듭니다.판권 화면에 분석 결과를 전달하고 탐색기 호출을 사용하여 표시합니다.

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 .
즐거운 인코딩!
본고는 최초https://developer.tomtom.com/blog에 발표되었다.원작자는 Mateusz Szczepaèczyk입니다.
더 많은 강좌, 도구 패키지, 프레젠테이션 등을 보십시오TomTom Developer Portal.무료 API 키를 잡으면 바로 구축을 시작합니다.