Android App/Kotlin

지도-구글 지도(마커, 카메라 및 뷰 설정)

AppJinny 2022. 12. 5. 09:14

*지도-구글 지도(마커 표시 및 설정, 카메라 포지션)

 

*카메라 포지션(카메라 및 뷰 설정)

-참고 : https://developers.google.com/maps/documentation/android-sdk/views#the_camera_position

-구글 지도에서는 카메라를 통해 현재 화면의 지도 뷰를 변경할 수 있음

-지도뷰 : 평면에서 아래를 내려다 보면서 모델링됨

-카메라 포지션 : 위도/경도, 방위, 기울기 및 확대/축소 속성 지정가능

-카메라 위치는 CameraPosition클래스에 옵션을 적용하여 조절

카메라 위치 조절코드 형식

--카메라 위치 옵션 Target : 카메라의 목표지점은 지도 중심의 위치이며 위도/경도 좌표로 지정

--카메라 위치 옵션 Zoom : 카메라의 확대/축소 레벨에 따라 지도 배율 결정(줌레벨이 높을수록 자세하게 볼 수 있음)

--Zoom레벨 : 1.0=세계 / 5.0=대륙 / 10.0=도시 / 15.0=거리 / 20.0=건물

--카메라 위치 옵션 Bearing : 지도의 수직선이 북쪽을 기준으로 시계방향 단위로 측정되는 방향

--카메라 위치 옵션 Tilt : 카메라의 기울기, 시야각을 변경하면 멀리떨어진 지형이 더 작게 나타나며 맵이 원근으로 나타남

 

*마커(Marker)

-지도에 위치를 표시함

-마커는 아이콘 색상, 이미지, 위치 변경 가능

-마커는 대화식으로 설계되어 클릭에 대한 이벤트처리 가능(마커 클릭 시 설정된 타이틀과 정보 보여주기 가능)

-마커 아이콘 이미지는 비트맵 이미지(.jpg, .png)만 가능하며 백터이미지는 불가

-마커 아이콘 이미지가 클 경우 Bitmap.createScaledBitmap() 메서드 사용

-(https://developers.google.com/maps/documentation/android-sdk/marker#maps_android_markers_add_a_marker-kotlin)

 

 

*구글 지도 마커, 카메라 및 뷰 설정 구현

-지도 생성 : -구글 플레이 서비스 SDK를 설치하고 Google Maps Activity 프로젝트 생성 후 Google Maps API 키 적용

--(https://heeyjinny.tistory.com/109)

 

-MapsActivity.kt

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import com.google.android.gms.maps.CameraUpdateFactory
import com.google.android.gms.maps.GoogleMap
import com.google.android.gms.maps.OnMapReadyCallback
import com.google.android.gms.maps.SupportMapFragment
import com.google.android.gms.maps.model.BitmapDescriptorFactory
import com.google.android.gms.maps.model.CameraPosition
import com.google.android.gms.maps.model.LatLng
import com.google.android.gms.maps.model.MarkerOptions
import com.heeyjinny.googlemaps.databinding.ActivityMapsBinding

//2
//구글지도가 준비되면 OnMapReadyCallback 인터페이스의 onMapReady()메서드를 호출하면서
//파라미터로 준비된 GoogleMap을 전달해줌
class MapsActivity : AppCompatActivity(), OnMapReadyCallback {

    //2-1
    //매서드 안에 미리 mMap프로퍼티 생성
    private lateinit var mMap: GoogleMap
    private lateinit var binding: ActivityMapsBinding

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        binding = ActivityMapsBinding.inflate(layoutInflater)
        setContentView(binding.root)

        //1
        // Obtain the SupportMapFragment and get notified when the map is ready to be used.
        // =SupportMapFragment를 가져와 map의 사용 준비가 완료되면 알려줌
        //SupportMapFragment의 findFragmentById()메서드로
        //id가 map인 SupportMapFragment를 찾은 것을 저장한 변수 생성
        //변수는 getMapAsync()를 호출해 안드로이드에 구글 지도를 그려달라는 요청을 함
        //getMapAsync()는 메인 스레드에서 호출해야 함
        val mapFragment = supportFragmentManager
            .findFragmentById(R.id.map) as SupportMapFragment
        mapFragment.getMapAsync(this)

    }

    //2-3
    //미리 선언된 mMap변수에 GoogleMap을 저장해두면 액티비티 전체에서 맵 사용가능
    override fun onMapReady(googleMap: GoogleMap) {
        mMap = googleMap

        //3
        //*****마커 표시 후 카메라 포지션 설정 뒤 마커 아이콘 변경
        //3-1
        //위치 옵션을 위해 위도 경도 고정좌표를 가지고 있는 변수 생성
        //서울시청의 위도와 경도
        val LATLNG = LatLng(37.566418, 126.977943)

        //3-2
        //위도와 경도 좌표값을 가지고 있는 변수를 이용해 마커추가
        //마커 옵션 정의를 위해 MarkerOptions()객체 필요
        //MarkerOptions()객체생성 후
        //position(): 마커 좌표 설정
        //title(): 마커 클릭 시 제목 설정
        //snippet(): 마커 클릭 시 정보 설정
        //icon(BitmapDescriptorFactory.fromResource(리소스위치))

        //비트맵 이미지를 이용해 마커 아이콘 변경
        //drawable 디렉터리에 PNG이미지 파일 추가
        //최상단 탭 File - New - Image Asset
        //벡터이미지는 안되며 .png 나 .jpg만 됨

        //마커 아이콘은 항상 BitmapDescriptor로 설정되며
        //BitmapDescriptorFactory 클래스의 메서드 중 하나를 사용하여 정의
        //메서드 중 비트맵 이미지의 리소스 ID를 사용하여 맞춤 마커를 만드는
        //fromResource(int resourceId) 메서드 사용
        val markerOptions = MarkerOptions()
            .position(LATLNG)
            .title("Seoul City Hall")
            .snippet("위치 좌표: ${(LATLNG.toString())}")
            .icon(BitmapDescriptorFactory.fromResource(R.drawable.ic_car))
        //3-3
        //GoogleMap 객체의 addMarker() 메서드에 MarkerOption 전달
        //지도에 마커 추가됨
        mMap.addMarker(markerOptions)

        //3-4
        //CameraPosition.Builder객체로 카메라 포지션 옵션 설정
        //카메라를 좌표 변수로 이동 후 줌을 거리레벨로 확대 하고
        //build()메서드 호출하여 객체 생성
        val cameraPosition = CameraPosition.Builder().target(LATLNG).zoom(15.0f).build()
        //3-5
        //카메라 포지션 옵션을 가지고 있는 변수를 새로운 카메라 포지션으로 변경
        //CameraUpdateFactory.newCameraPosition()메서드에 변수 전달하여
        //카메라 포지션에 지도에서 사용할 수 있는 카메라 정보 생성
        val cameraUpdate = CameraUpdateFactory.newCameraPosition(cameraPosition)
        //3-6
        //변경된 카메라 정보를 GoogleMap의 moveCamera()메서드 전달
        //카메라 포지션을 기준으로 지도의 위치 및 배율이 변경됨
        mMap.moveCamera(cameraUpdate)

    }//onMapReady

}//MapsActivity

 

 

*결과

 

 

 

*참고

-구글 지도구현 설정

https://developers.google.com/maps/documentation/android-sdk

 

Google Maps Platform 문서  |  Maps SDK for Android  |  Google Developers

Google Maps Platform 문서

developers.google.com




 

 


이 포스팅에 작성한 내용은 고돈호, ⌜이것이 안드로이드다⌟, 한빛미디어(주), 2022 에서 발췌하였습니다.