[안드로이드] 네이버 지도 API - 위치와 오버레이 사용하기

✍ 네이버 지도 API

https://navermaps.github.io/android-map-sdk/guide-ko/1.html

시작하기 · 네이버 지도 안드로이드 SDK

 

✍ 좌표 나타내기

→ LatLng

위경도 좌표를 나타내는 클래스인 LatLng 로 latitude(위도), longitude(경도)를 속성으로 가지고 있다. 한 번 생성된 객체의 속성(latitude, longitude)은 변경할 수 없다.

// LatLng(latitude, longitude)
val coord = LatLng(37.5670135, 126.9783740)

coord.latitude    // 위도
coord.longitude   // 경도

→ LatLngBounds

위도와 경도의 좌표로 이루어진 하나의 MBR(Minimun Bounding Rectangle)을 나태내는 클래스로 southWest(남서쪽), northEast(북동쪽) 속성을 가지고 있다. 한 번 생성된 객체의 속성(southWest, northEast)은 변경할 수 없다.

val southWest = LatLng(31.43, 122.37)
val northEast = LatLng(44.35, 132.0)
val bounds = LatLngBounds(southWest, northEast)

 

✍ 현재 위치 기능 사용하기 - FusedLocationSource

※ FusedLocationSource : 지자기, 가속도 센서를 활용해 최적의 위치를 반환하는 구현체

 

① AndroidManifext.xml 에 권한 명시하기

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

 

② 의존성 추가 (build.gradle: Module)

dependencies {
    implementation("com.google.android.gms:play-services-location:19.0.1")
}

 

③ 권한 요청하기

class LocationTrackingActivity : AppCompatActivity(), OnMapReadyCallback {
    private lateinit var locationSource: FusedLocationSource
    private lateinit var naverMap: NaverMap

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        // ...
        locationSource =
               FusedLocationSource(this, LOCATION_PERMISSION_REQUEST_CODE)
    }

    override fun onRequestPermissionsResult(requestCode: Int,
                                            permissions: Array<String>,
                                            grantResults: IntArray) {
        if (locationSource.onRequestPermissionsResult(requestCode, permissions,
                grantResults)) {
            if (!locationSource.isActivated) { // 권한 거부됨
                naverMap.locationTrackingMode = LocationTrackingMode.None
            }
            return
        }
        super.onRequestPermissionsResult(requestCode, permissions, grantResults)
    }

    override fun onMapReady(naverMap: NaverMap) {
        this.naverMap = naverMap
        naverMap.locationSource = locationSource
    }

    companion object {
        private const val LOCATION_PERMISSION_REQUEST_CODE = 1000
    }
}

 

# 위치 추적 사용법

// 위치 추적 사용
naverMap?.locationTrackingMode = LocationTrackingMode.Follow

// 위치 추적 종료
naverMap?.locationTrackingMode = LocationTrackingMode.None

// 위치 변경 이벤트 
naverMap.addOnLocationChangeListener { location ->
    Toast.makeText(this, "${location.latitude}, ${location.longitude}",
             Toast.LENGTH_SHORT).show()
}

 

# 위치 추적 종류

① None : 위치를 추적하지 않습니다.

② NoFollow : 위치 추적이 활성화되고, 현위치 오버레이가 사용자의 위치를 따라 움직이지만 지도는 움직이지 않는다.

③ Follow : 위치 추적이 활성화되고, 현위치 오버레이와 카메라의 좌표가 사용자의 위치를 따라 움직이지만 API나 제스처를 사용해 임의로 카메라를 움직일 경우 모드가 NoFollow로 바뀐다.

④ Face : 위치 추적이 활성화되고, 현위치 오버레이, 카메라의 좌표, 베어링이 사용자의 위치 및 방향을 따라 움직이지만 API나 제스처를 사용해 임의로 카메라를 움직일 경우 모드가 NoFollow로 바뀐다.

 

✍ 오버레이 나타내기

오버레이는 지리적 정보를 시각적으로 나타내는 요소로, 개발자가 지도 위에 자유롭게 배치할 수 있다. 네이버 지도 SDK는 마커, 정보 창, 셰이프 등 다양한 유형의 오버레이를 제공한다. 

 

→ 위치 오버레이

사용자의 위치를 나타내는 데 특화된 오버레이이로, 지도상에 단 하나만 존재한다.

 

→ 마커

// 마커 객체 생성
val maker = Maker()
val maker2 = Maker()

// 마커 위치 설정
maker.position = LatLng(37.5670135, 126.9783740)

// 마커 아이콘 설정
val image = OverlayImage.fromResource(R.drawable.marker_icon)
maker.icon = image
maker2.icon = image

// 마커 크기 설정 - 픽셀
marker.width = 50
marker.height = 80

// 자동 크기 설정
marker.width = Marker.SIZE_AUTO
marker.height = Marker.SIZE_AUTO

// 마커 텍스트
marker.captionText = "Hello"         // 마커 텍스트 표시(캡션) 
marker.captionRequestedWidth = 200   // 마커 텍스트(캡션) 너비 제한 - 픽셀
marker.setCaptionAligns(Align.Top)   // 마커 텍스트(캡션) 방향
marker.captionOffset = 30            // 마커 아이콘과 캡션 간의 거리
marker.captionColor = Color.BLUE     // 마커 캡션 색상
marker.captionHaloColor = Color.rgb(200, 255, 200)    // 마커 외각선
marker.captionTextSize = 16f         // 마커 캡션 색상 (16dp)

// 마커 캡션 특정 줌 레벨에서만 설정(12~16)
marker.captionMinZoom = 12.0
marker.captionMaxZoom = 16.0

// 마커 클릭 이벤트 
// : 반환값이 false 이면 다른 이벤트에 전파 true 면 전파하지 않음
marker.setOnClickListener {
    Toast.makeText(context, "마커 1 클릭됨", Toast.LENGTH_SHORT).show()
    // 이벤트 전파
    false
}

// 마커 지도에 추가
maker.map = naverMap

// 마커 지도에서 삭제
maker.map = null

 

→ 정보 창

 마커의 위 또는 지도의 특정 지점에 부가적인 정보를 나타내기 위한 오버레이다.

val marker = Marker()

val infoWindow = InfoWindow()
infoWindow.adapter = object : InfoWindow.DefaultTextAdapter(context) {
    override fun getText(infoWindow: InfoWindow): CharSequence {
        return "정보 창 내용"
    }
}

// 마커 위에 정보창 열기
infoWindow.open(marker)

// 좌표로 정보창 열기
infoWindow.position = LatLng(37.5666102, 126.9783881)
infoWindow.open(naverMap)

// 마커 위의 정보창 닫기
infoWindow.close()

// map 속성으로 닫기
infoWindow.map = null