[Android / Kotlin] 네이버 Map API 간단히 사용하기

 

네이버 Map API 를 사용해보도록 하겠습니다! 

https://www.ncloud.com/

NAVER CLOUD PLATFORM

회원가입을하고 콘솔 로그인을 해주세요~ 

 

 

 

 

 

.해당 페이지에서 로그인을 한 뒤 서비스 -> Application Service -> Maps로 들어가 준다.

그러면 위와 같은 화면으로 이동하는데, 여기서 이용 신청하기를 선택한다.

다음으로 이동하는 페이지에서 Application 등록을 선택하여 새로운 Application을 등록해준다.

여기서 중요한 부분은 Android 앱 패키지 이름을 정확하게 입력하지 않으면 나중에 에러가 발생하니 주의하자.

 

등록 후 인증 정보를 누르면 위와 같은 창이 나오는데, 여기서 Client ID를 복사해주도록 하자.

 

이제 안드로이드 스튜디오로 넘어가서 네이버 맵을 사용 해보도록 하자.

기본적인 방법은 아래 링크에 있으니 이곳을 보고 따라 해도 무방하다.

https://guide.ncloud-docs.com/docs/naveropenapiv3-maps-android-sdk-v3-start

Android 시작 가이드 - Mobile Dynamic Map (v3)

 

먼저, 적당한 프로젝트 하나를 생성해주도록 하자.

그런 뒤 Gradle에 의존성을 추가한다.

allprojects {
    repositories {
        google()
        jcenter()
        maven {
            url 'https://naver.jfrog.io/artifactory/maven/'
        }
    }

}

프로젝트 Gradle파일에 위의 maven이하 코드를 추가

implementation 'com.naver.maps:map-sdk:3.12.0'
implementation "com.google.android.gms:play-services-location:18.0.0"

그런 뒤 모듈 Gradle파일에 위의 implementation을 추가한다.

다음으로 Manifest파일로 넘어간다.

    <application
        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
        <meta-data
            android:name="com.naver.maps.map.CLIENT_ID"
            android:value="클라이언트 ID" />
    </application>

Manifest파일에 위의 meta-data코드를 추가하는데,  value에 위에서 복사한 클라이언트 ID를 넣어준다.

여기까지 하고 sync now를 누르면 기본적인 사전 준비는 끝이다.

 

 

mainfest 추가 

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

 

activity_main layout 

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:id="@+id/fragment_container"
    android:layout_height="match_parent"
    tools:context=".MainActivity">


<!--         네이버 지도 -->
        <fragment
            android:id="@+id/map"
            android:name="com.naver.maps.map.MapFragment"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />


</androidx.constraintlayout.widget.ConstraintLayout>

 

MainActivity 

class MainActivity : AppCompatActivity(), OnMapReadyCallback {
    private var LOCATION_PERMISSION = 1004
    private lateinit var naverMap: NaverMap
    private lateinit var locationSource: FusedLocationSource
    private val marker =Marker()
    private lateinit var fusedLocationClient: FusedLocationProviderClient
    private val PERMISSION = arrayOf(android.Manifest.permission.ACCESS_FINE_LOCATION ,android.Manifest.permission.ACCESS_COARSE_LOCATION )


    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)


        fusedLocationClient = LocationServices.getFusedLocationProviderClient(this)
        locationSource = FusedLocationSource(this@MainActivity , LOCATION_PERMISSION)
        val fragmentManager: FragmentManager = supportFragmentManager
        var mapFragment: MapFragment? = fragmentManager.findFragmentById(R.id.map) as MapFragment?
        if (mapFragment == null) {
            mapFragment = MapFragment.newInstance()
            fragmentManager.beginTransaction().add(R.id.map, mapFragment).commit()
        }

        mapFragment!!.getMapAsync(this)

    }

    @UiThread
    override fun onMapReady(map: NaverMap) {

        naverMap = map
//        naverMap.maxZoom =18.0
//        naverMap.minZoom =5.0
        
        
//        카메라 설정
        val cameraPosition = CameraPosition(
            LatLng(37.5666102, 126.9783881), // 대상 지점
            16.0, // 줌 레벨
            20.0, // 기울임 각도
            180.0 // 베어링 각도
        )
        naverMap.cameraPosition = cameraPosition

        naverMap.addOnCameraChangeListener { reason, animated ->
            // 마커 포지션
        marker.position = LatLng(naverMap.cameraPosition.target.latitude, naverMap.cameraPosition.target.longitude) }

        naverMap.addOnCameraIdleListener {
            // 현재 보이는 네이버맵의 정중앙 가운데로 마커
            marker.map = naverMap
            marker.icon = MarkerIcons.BLACK
            marker.iconTintColor = Color.BLUE

        }
        naverMap.locationSource = locationSource
        ActivityCompat.requestPermissions(this, PERMISSION, LOCATION_PERMISSION)
    }



    override fun onRequestPermissionsResult(
        requestCode: Int, permissions: Array<out String>, grantResults: IntArray) {
        when {
            requestCode != LOCATION_PERMISSION -> {
                return
            }
            else -> {
                when {
                    locationSource.onRequestPermissionsResult(requestCode,permissions,grantResults) -> {
                        if (!locationSource.isActivated){
                            naverMap.locationTrackingMode = LocationTrackingMode.None
                        }else{
                            naverMap.locationTrackingMode = LocationTrackingMode.Follow
                        }
                    }
                }
            }
        }
        super.onRequestPermissionsResult(requestCode, permissions, grantResults)
    }

}

 

 

 

 

참조 

https://angangmoddi.tistory.com/259