일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | ||
6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 | 29 | 30 | 31 |
- 환경 변수
- 환경 변수 설정
- 플러터 지도
- 플러터
- java
- flutter doctor
- 플러터 위젯
- 안드로이드스튜디오
- dart
- NaverMap
- 에뮬레이터
- Flutter 설치
- flutter 위젯 종류
- 플러터 설치
- flutter_naver_map
- 안드로이드 스튜디오 설치
- flutter 위젯
- flutter widgets
- 네이버 지도 api
- JavaScript
- 레이아웃 위젯
- AVD
- Android Studio
- flutter style
- 네이버 지도
- flutter
- Today
- Total
벡연
[Flutter] 네이버 지도 API key 발급 및 지도 표출 🗺️ 본문
1. 네이버 지도 Api key 발급
https://www.ncloud.com/product/applicationService/maps
NAVER CLOUD PLATFORM
cloud computing services for corporations, IaaS, PaaS, SaaS, with Global region and Security Technology Certification
www.ncloud.com
* 1-1. Naver Cloud Platform에서 Application 등록
* 1) Application 이름 입력
2) Service 선택
3) 서비스 환경 등록
[ Maps Service ]
Web Dynamic Map
|
JavaScript 형태의 네이버 지도 플랫폼으로, 사용자 웹 서비스 또는 애플리케이션에 네이버 지도 기능을 구현할 수 있도록 다양한 클래스와 라이브러리를 제공 |
Moblie Dynamic Map | 네이버 지도 Android 개발 도구로, Android 운영체제의 모바일 환경에서 네이버 지도를 사용할 수 있도록 다양한 클래스와 메소드를 제공 |
Static Map | REST 형식을 따르는 네이버 지도 인터페이스로 HTTP GET 메소드를 이용하여 네이버 지도 이미지를 받을 수 있음 |
Directions 5
|
REST 형식을 따르는 네이버 지도 인터페이스로 HTTP GET 메소드를 이용하여 출발지-목적지 간의 경로 정보를 요청하고 응답으로 경로 데이터 배열을 반환 받음 |
Directions 15
|
REST 형식을 따르는 네이버 지도 인터페이스로 HTTP GET 메서드를 이용하여 출발지와 목적지 간의 경로 정보를 요청하고 응답으로 경로 데이터 배열을 반환 받음 |
Geocoding | REST 형식을 따르는 네이버 지도 인터페이스로, HTTP GET 메소드를 이용하여 지번 도로명을 좌표값으로 반환 받는 API |
Reverse Geocoding | REST 형식을 따르는 네이버 지도 인터페이스로, HTTP GET 메소드를 이용하여 지도 좌표값을 주소 정보(지번, 도로명, 법정동, 행정동)으로 반환 받는 API |
* Adroid 앱 피키지 이름과 iOS Bundle ID는 Android Studio 프로젝트의 android/app/build.gradle.kts 파일에 있는 namespace 사용
* 1-2. 등록된 Application 인증 정보 확인
2. 에뮬레이터(AVD)에 지도 표출
* 2-1. 지도 초기화 및 생성
[ lib/main.dart ]
import 'package:flutter/material.dart';
import 'package:flutter_naver_map/flutter_naver_map.dart';
// 지도 초기화
void main() async {
WidgetsFlutterBinding.ensureInitialized();
await NaverMapSdk.instance.initialize(clientId: '발급 받은 Client ID');
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
// 지도 생성
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: NaverMap(
options: const NaverMapViewOptions(),
onMapReady: (controller) {
print("네이버 맵 로딩됨!");
},
),
),
);
}
}
[ android/app/build.gradle.kts ]
* ndkVersion & minSdk 버전 수정
* 네이버 맵 플러그인이 SDK 21 버전 이상을 요구함으로 최소 버전을 설정 해야 함
android {
namespace = "com.example.flutter_study"
compileSdk = flutter.compileSdkVersion
//ndkVersion = flutter.ndkVersion
ndkVersion = "27.0.12077973" // 수정
compileOptions {
sourceCompatibility = JavaVersion.VERSION_11
targetCompatibility = JavaVersion.VERSION_11
}
kotlinOptions {
jvmTarget = JavaVersion.VERSION_11.toString()
}
defaultConfig {
// TODO: Specify your own unique Application ID (https://developer.android.com/studio/build/application-id.html).
applicationId = "com.example.flutter_study"
// You can update the following values to match your application needs.
// For more information, see: https://flutter.dev/to/review-gradle-config.
//minSdk = flutter.minSdkVersion
minSdk = 23 // 수정
targetSdk = flutter.targetSdkVersion
versionCode = flutter.versionCode
versionName = flutter.versionName
}
buildTypes {
release {
// TODO: Add your own signing config for the release build.
// Signing with the debug keys for now, so `flutter run --release` works.
signingConfig = signingConfigs.getByName("debug")
}
}
}
[ android/gradle.properties ]
* android.nonTransitiveRClass의 값을 false로 설정
org.gradle.jvmargs=-Xmx8G -XX:MaxMetaspaceSize=4G -XX:ReservedCodeCacheSize=512m -XX:+HeapDumpOnOutOfMemoryError
android.useAndroidX=true
android.enableJetifier=true
android.nonTransitiveRClass=false // 추가
[ pubspec.yaml ]
* 패키지 추가 → https://pub.dev/packages/flutter_naver_map
flutter_naver_map | Flutter package
Naver Map plugin for Flutter, which provides map service of Korea.
pub.dev
dependencies:
flutter_naver_map: ^1.3.0+1 // 추가
flutter:
sdk: flutter
http: ^0.13.6
* 2-2. pubspec.yaml 파일에서 Pub get 진행
* 2-3. 에뮬레이터(AVD) 추가
* 원하는 AVD 선택 후 설치
* 2-4. 에뮬레이터(AVD) 실행
* 2-5. 작성한 코드 실행 후 에뮬레이터에 표출되는 지도 확인
* 실행할 기기 선택 후 세모 버튼 클릭
* 참고
코드 수정 후 번개 모양 아이콘 클릭하면 수정한 코드대로 지도에 적용됩니다 !
빠이 (´▽`ʃ♡ƪ)
'Flutter' 카테고리의 다른 글
[Flutter] Flutter Widgets (플러터 위젯) 종류 & 사용법 🗂️ (2) | 2025.03.28 |
---|---|
[Flutter] Flutter란❓ (0) | 2025.03.27 |
[Flutter & Android Studio] 플러터 및 안드로이드 스튜디오 다운로드 및 개발 환경 셋팅 🔎 (0) | 2025.03.19 |