[Kotlin/Android] 네이버 지도 연결 후 위치 표시 (마커 표시) 및 마커 색상 변경

[Kotlin/Android] 네이버 지도 현위치 띄우기 (실시간 위치 연결) (tistory.com)

[Kotlin/Android] 네이버 지도 현위치 띄우기 (실시간 위치 연결)

 

안녕하세요 !
바로 전 글에서는 네이버 지도 연결 후에 현위치 좌표 아이콘 띄우기를 했습니다.
이번에는 현위치 외에 표시하고 싶은 곳에 마커 표시를 하는 법을 알아보겠습니다.

 

아주아주 간단해요.

 

저는 메서드를 따로 줘서 만들었어요. 

// 마커 표시
    private fun setMarker(){
        val marker1 = Marker()
        val marker2 = Marker()

        marker1.position = LatLng( 37.39710472617026, 126.97022259235382)
        marker2.position = LatLng(37.396550698344704, 126.97101652622223)

        // 디폴트색은 초록
        // 유량 및 수압 구분값별로 색의 차이를 주는 코드 작성
        marker1.icon = MarkerIcons.YELLOW; marker1.width = 70; marker1.height = 80
        marker2.icon = MarkerIcons.RED; marker2.width = 70; marker2.height = 80

        marker1.map = naverMap
        marker2.map = naverMap
    }​

 

만약 저의 전 코드를 함께 사용한다면 이 부분을 꼭 보셔야 합니다.

평소처럼 아무생각없이 onCreateView() 에다가 setMarker()를 호출했다가 초기화되지 않았다는 에러가 떠서 확인해보니naverMap은 onMapReady가 호출될 때 초기화 되므로,
 onCreateView() 에서 setMarker()를 호출하면 naverMap이 초기화 되기도 전에 사용되기 때문에 위와같은 에러가 뜨는 것 이였습니다. 

참고하시면 좋을 것 같아요  ~~~

package com.example.android1_practice.ui.Map

import android.Manifest
import android.content.pm.PackageManager
import android.os.Bundle
import androidx.fragment.app.Fragment
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import androidx.core.content.ContextCompat
import com.example.android1_practice.MainActivity
import com.example.android1_practice.R
import com.example.android1_practice.databinding.FragmentMapMainBinding
import com.naver.maps.geometry.LatLng
import com.naver.maps.map.LocationSource
import com.naver.maps.map.LocationTrackingMode
import com.naver.maps.map.MapFragment
import com.naver.maps.map.NaverMap
import com.naver.maps.map.OnMapReadyCallback
import com.naver.maps.map.overlay.Marker
import com.naver.maps.map.util.FusedLocationSource
import com.naver.maps.map.util.MarkerIcons

class MapMainFragment : Fragment() , OnMapReadyCallback {

    lateinit var _binding: FragmentMapMainBinding
    lateinit var mainActivity : MainActivity

    // 필요한 전역변수 세 개 만들어주기
    private lateinit var locationSource: LocationSource
    private lateinit var naverMap: NaverMap

    // 위치 권한 요청 코드
    private val LOCATION_PERMISSION_REQUEST_CODE = 1000

    // 위치 권한 배열
    private val PERMISSIONS = arrayOf(Manifest.permission.ACCESS_FINE_LOCATION, Manifest.permission.ACCESS_COARSE_LOCATION)


    override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? {
        // Inflate the layout for this fragment

        _binding = FragmentMapMainBinding.inflate(inflater)
        mainActivity = activity as MainActivity

        // 여기에 setMarker() 를 호출하면 UninitializedPropertyAccessException 에러가 남.
        // 그 이유: naverMap은 onMapReady가 호출될 때 초기화 되므로, naverMap이 초기화 되기도 전에 사용되기 때문
        // 고로 onMapReady() 에서 호출해줘야함
        // setMarker()

        return _binding.root
    }

    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        super.onViewCreated(view, savedInstanceState)

        // 위치 권한이 있는지 확인하고 지도 초기화
        if (hasPermission()) {
            initMapView()
        } else {
            requestPermissions(PERMISSIONS, LOCATION_PERMISSION_REQUEST_CODE)
        }
    }

    private fun initMapView() {
        val fm = childFragmentManager
        var mapFragment = fm.findFragmentById(R.id.naverMap) as MapFragment?

        if (mapFragment == null) {
            mapFragment = MapFragment.newInstance()
            if (mapFragment != null) {
                fm.beginTransaction().add(R.id.naverMap, mapFragment).commit()
            }
        }

        // OnMapReadyCallback 등록
        if (mapFragment != null) {
            mapFragment.getMapAsync(this)
        }
        locationSource = FusedLocationSource(this, LOCATION_PERMISSION_REQUEST_CODE)
    }

    // 위치 권한 확인
    private fun hasPermission(): Boolean {
        for (permission in PERMISSIONS) {
            if (ContextCompat.checkSelfPermission(requireContext(), permission) != PackageManager.PERMISSION_GRANTED) {
                return false
            }
        }
        return true
    }

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

        // LocationSource 설정
        naverMap.locationSource = locationSource

        // 현재 위치 버튼 활성화
        naverMap.uiSettings.isLocationButtonEnabled = true

        // 위치 추적 모드 설정
        naverMap.locationTrackingMode = LocationTrackingMode.Follow

        setMarker()

    }

    // 마커 표시
    private fun setMarker(){
        val marker1 = Marker()
        val marker2 = Marker()

        marker1.position = LatLng( 37.39710472617026, 126.97022259235382)
        marker2.position = LatLng(37.396550698344704, 126.97101652622223)

        // 디폴트색은 초록
        // 유량 및 수압 구분값별로 색의 차이를 주는 코드 작성
        marker1.icon = MarkerIcons.YELLOW; marker1.width = 70; marker1.height = 80
        marker2.icon = MarkerIcons.RED; marker2.width = 70; marker2.height = 80

        marker1.map = naverMap
        marker2.map = naverMap
    }

}​

그렇게 참고는 미래의 나만 하겠지 뭐... ㅎㅎ...

연나 화팅

! 끝 !