[Flutter] naver_map_plugin 사용기

Flutter를 사용한 토이 프로젝트를 진행중 네이버 지도를 사용해보고 싶었는데 마침 플러그인이 있어서 소개겸 사용한 방법을 포스팅합니다.

 

플러그인 pub.dev : pub.dev/packages/naver_map_plugin

1. 사용방법

1. 네이버 클라우드 플랫폼에 가입하고 앱 등록

• 클라우드 플랫폼 : www.ncloud.com

NAVER CLOUD PLATFORM

• 가입 후 Console 메뉴로 들어갑니다.

 

• 콘솔 메뉴에서 application을 등록합니다.

• 어플리케이션 이름과 네이버 지도 서비스를 체크합니다.

• 하단의 서비스 환경 등록에 내 프로젝트를 추가해줍니다. 프로젝트 패키지명을 적어야하는데 모르시겠다면
  프로젝트의 android/app/src/main/AndroidManifest.xml 파일의 최상단에 package명이 있습니다.
  (* 프로젝트 구조에 따라 다를 수도 있습니다)

• 추가된 Application에 인증정보를 확인합니다. 이 인증정보에서 clientId를 사용할겁니다. 이 인증정보는 함부로 공유하시면 안됩니다. 

 

2.1. 안드로이드

2.1.1. AndroidManifest.xml에 메타데이터 및 권한 추가

경로는 android/app/src/main/AndroidManifest.xml 입니다. 아래처럼 추가합니다.
ACCESS_FINE_LOCATION 권한은 현위치탐색 기능을 사용하기 위한 권한추가입니다.

 

<manifest>
<application
        android:name="io.flutter.app.FlutterApplication"
        ...

        <activity
            android:name="com.yalantis.ucrop.UCropActivity"
            android:screenOrientation="portrait"
            android:theme="@style/Theme.AppCompat.Light.NoActionBar"/>
        ...
        여기랑
        <meta-data
            android:name="com.naver.maps.map.CLIENT_ID"
            android:value="위에서 받은 클라이언트 아이디"/>
</application>
이것까지
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/>
</manifest>

 

2.1.2. 동적권한 추가하기

android API level 23(M) 이상의 경우 동적 권한을 필요로 합니다. 여러 방법이 있겠지만 플러그인 제작자인 분이 사용한 예제의 방법으로 추가했습니다. android/app/src/main/.../MainActivity 파일에 아래처럼 추가합니다.

 

class MainActivity: FlutterActivity() {
    override fun configureFlutterEngine(@NonNull flutterEngine: FlutterEngine) {
        GeneratedPluginRegistrant.registerWith(flutterEngine);

        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
            if (checkSelfPermission(Manifest.permission.ACCESS_FINE_LOCATION) != PackageManager.PERMISSION_GRANTED) {
                requestPermissions(arrayOf(Manifest.permission.ACCESS_FINE_LOCATION), 0);
            }
        }
    }
}

 

2.2. IOS

2.2.1 터미널에서 git-lfs 설치

아래 명령어를 터미널에서 실행해서 git-lfs를 설치합니다. 대용량 파일을 받기 위함입니다.

 

brew install git-lfs

 

2.2.2 info.plist에 dict 추가

현위치 탐색까지 사용할거라면 밑의 두 dict를 ios/Runner/Info.plist에 추가합니다.

 

<dict>
  <key>NMFClientId</key>
  <string>위에서 받은 클라이언트 아이디</string>
  <key>io.flutter.embedded_views_preview</key>
  <true/>
  <key>NSAllowsArbitraryLoads</key>
  <true/>
</dict>

현위치 탐색을 위한 권한 추가
<dict>
    <key>NSLocationAlwaysAndWhenInUseUsageDescription</key>
	<string>USAGE PERPOSE</string>
	<key>NSLocationAlwaysUsageDescription</key>
	<string>USAGE PERPOSE</string>
	<key>NSLocationWhenInUseUsageDescription</key>
	<string>USAGE PERPOSE</string>
</dict>

2.2.3 권한 획득을 위한 코드 추가

ios/Runner/AppDelegate.swift 파일에 아래 코드를 추가하면 권한을 획득할 수 있습니다.

 

if (CLLocationManager.locationServicesEnabled()) {
    switch CLLocationManager.authorizationStatus() {
    case .denied, .notDetermined, .restricted:
        self.manager.requestAlwaysAuthorization()
        break
    default:
        break
    }
}

 

3. dependancy 추가하기

pubspec.yaml 파일에 dependancy를 추가합니다.

 

dependencies:
  naver_map_plugin: ^0.9.0

 

4. 사용하기

사용하는 방법은 예제 혹은 구글링을 활용하시면 될것 같습니다.... ㅎㅎ 저도 아직 알아가는 중입니다.
플러그인 예제 : pub.dev/packages/naver_map_plugin/example

 

//위젯부분
NaverMap(
    initialCameraPosition: CameraPosition(
    	target: LatLng(37.566570, 126.978442),
    	zoom: 17,
    ),
    onMapCreated: _onMapCreated,
	//onMapTap: _onMapTap,
	markers: _markers,
	initLocationTrackingMode:
	LocationTrackingMode.NoFollow,
)


//메소드 부분
void _onMapCreated(NaverMapController controller) {
	_naverMapController.complete(controller);
}

void _onMapTap(LatLng latLng) {
	...
}

 

---

플러그인의 설명 부분을 요약하고 정리한 포스팅입니다.
포스팅 내용과 함께 플러그인 ReadMe를 확인해주시면 좋을것 같습니다. ㅎㅎ