어떻게 Flatter에 구글 지도 플러그인을 추가합니까?

소개하다.

현재 응용 프로그램에서 지도 인터페이스를 사용하는 것은 매우 흔해서 사용자에게 위치, 방향과 노선에 대한 상세한 정보를 효과적으로 전달할 수 있다.
이 문서에서는 Google Maps Flutter 패키지를 사용하여 Google Maps 플러그인을 Flatter에 통합하는 방법을 살펴봅니다.

카탈로그

GCP 프로젝트 만들기

구글맵 SDK(Android 및 iOS용) 추가

API 키 만들기

설정 떨림 응용

구글 지도 위젯 추가.

GCP 프로젝트 만들기

구글 맵 플러그인을 사용하려면 GCP 프로젝트와 그에 상응하는 API 키가 필요합니다.새 GCP 프로젝트를 작성하려면 다음 절차를 따르십시오.

GCP console으로 가세요.

에서 Select a project 대화 상자를 열고 New Project을 클릭합니다.

프로젝트 이름을 입력하고 Create 을 클릭합니다.

이를 바탕으로 GCP 프로젝트를 만들었습니다.

You can find the official documentation to create GCP project here.

구글 맵 SDK 추가

구글 맵 플러그인을 사용하려면 안드로이드와 iOS에 Maps SDK을 추가해야 합니다.필요한 SDK를 추가하려면 다음 절차를 따르십시오.

내비게이션 메뉴에서 APIs & Services으로 이동하고 Library을 선택하세요.

은 Maps을 검색하고 안드로이드 및 iOS에 Maps SDK을 활성화합니다.

이렇게 해서 필요한 Maps SDK를 추가했습니다.

API 키 만들기

마지막으로, 떨림 프로그램과 GCP 프로젝트를 연결하기 위해 API 키가 필요합니다.API 키를 만들려면 다음 절차를 따르십시오.

내비게이션 메뉴에서 APIs & Services으로 이동하고 Credentials을 선택하세요.

CREATE CREDENTIALS 을 클릭하고 API key 을 선택합니다.

이걸로 API 키를 만들었습니다. 나중에 떨림 프로그램에서 사용할 것입니다.

바이브레이션 응용 프로그램 설정

새 바이브레이션 항목을 만들고 가장 좋아하는 IDE에서 엽니다.

flutter create fluttermap

pubspec.yaml 파일로 이동하여 dependencies에 google_maps_flutter 플러그 인을 추가하고 flutter pub get을 실행하십시오.

dependencies:
  ...
  google_maps_flutter: ^2.1.0

안드로이드 설정

android/app/build에서 minSdkVersion을 설정합니다.그레델.

android {
    defaultConfig {
        minSdkVersion 20
    }
}

android/app/src/main/AndroidManifest.xml으로 이동하여 프로그램 표시에 다음 코드를 추가합니다.

<meta-data android:name="com.google.android.geo.API_KEY"
           android:value="YOUR KEY HERE"/>

manfest 탭에 다음 코드를 추가합니다.

<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />

iOS 설정

ios/Runner/AppDelegate.swift으로 이동하여 다음 코드로 전체 코드를 대체합니다.

import UIKit
import Flutter
import GoogleMaps

@UIApplicationMain
@objc class AppDelegate: FlutterAppDelegate {
  override func application(
    _ application: UIApplication,
    didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?
  ) -> Bool {
    GMSServices.provideAPIKey("YOUR KEY HERE")
    GeneratedPluginRegistrant.register(with: self)
    return super.application(application, didFinishLaunchingWithOptions: launchOptions)
  }
}

ios/Runner/Info.plist으로 이동하여 다음 코드를 추가합니다.

<key>NSLocationWhenInUseUsageDescription</key>
<string>Location Access.</string>

이것으로 우리는 구글 지도 플러그인을 사용하는 설정을 완성했다.

구글 맵 위젯을 추가합니다.

지도를 추가하는 기초를 만듭시다.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Map',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Map(),
    );
  }
}

class Map extends StatefulWidget {
  @override
  _MapState createState() => _MapState();
}

class _MapState extends State<Map> {
  @override
  Widget build(BuildContext context) {
    var height = MediaQuery.of(context).size.height;
    var width = MediaQuery.of(context).size.width;

    return Container(
      height: height,
      width: width,
      child: Scaffold(
        body: Stack(
          children: <Widget>[
            // Todo: Add Map
          ],
        ),
      ),
    );
  }
}

우리는 Stateful Widget을 사용할 것이다. 우리는 그 중에서 Container을 만들었다.Container의 자대로서 우리는 Scaffold소부품을 사용하는데 그 주체는 Stack소부품이다.우리는 지도를 무대 뒤에 놓고 다른 작은 부품을 위에 놓을 것이다.
우리는 또한 지도가 전체 화면을 덮을 수 있도록 화면의 폭과 높이를 계산했다.
이제 구글 지도 위젯을 추가합시다.

// import package
import 'package:google_maps_flutter/google_maps_flutter.dart';

// set an initial location of the Map
CameraPosition _initialCameraPosition = CameraPosition(target: LatLng(20.5937, 78.9629));

// add this to control the Map
GoogleMapController googleMapController;

// Replace "Todo: Add Map" with the following
GoogleMap(
  initialCameraPosition: _initialCameraPosition ,
  myLocationEnabled: true,
  myLocationButtonEnabled: true,
  mapType: MapType.normal,
  zoomGesturesEnabled: true,
  zoomControlsEnabled: true,
  onMapCreated: (GoogleMapController c) {
    // to control the camera position of the map
    googleMapController = c;
  },
),

구글 지도의 작은 위젯에 사용되는 파라미터를 탐색해 봅시다.

initial Camera Position: 처음 시작할 때 맵 보기를 로드합니다.필수 매개변수입니다.

myLocationEnabled: 지도에 현재 위치를 파란색 점으로 표시합니다.

myLocation Button Enabled: 사용자 위치를 맵 센터에 배치합니다.

mapType: 표시되는 맵 유형을 지정합니다.가능한 값은 정상값, 위성값, 혼합값과 지형값을 포함한다.

zoomGesturesEnabled: 지도가 축소 제스처에 응답해야 하는지 확인하십시오.

ZoomControl 활성화:줌 컨트롤을 표시합니다.

onMapCreated: 맵이 준비되었을 때 실행되는 리셋 함수입니다.

이것으로 우리는 Flutter 프로그램에 구글 지도의 작은 위젯을 추가했다.프로그램을 실행할 때 출력은 다음과 같아야 한다.

읽어주셔서 감사합니다.나는 이 글이 네가 Flitter에서 구글 지도를 사용하기 시작하는 데 도움을 줄 수 있기를 바란다.
너는 언제든지 나에게 연락해서 토론을 진행할 수 있다.
즐거운 코딩!