[안드로이드 스튜디오] 네이버지도 #7 지도 화면 이동 (카메라 무빙)

 

 

이번 포스트에서는 네이버 지도에 특정 위치로 이동(카메라 무빙)하는 방법에 대해설명하도록 하겠습니다.

 

이번에도 역시 지난번 포스팅에 이어서 계속 진행할 예정인 이전 포스팅을 못보신 분들은 아래 글을 참조하시기 바랍니다.

 

2020/06/16 - [안드로이드스튜디오 개발] - [안드로이드 스튜디오] 네이버 지도 #6 - 커스텀 정보창(InfoWindow) 표시하기

[안드로이드 스튜디오] 네이버 지도 #6 - 커스텀 정보창(InfoWindow) 표시하기

지난번 포스팅에서 마커를 클릭하면 커스텀 정보창을 표시하는 방법에 대해 설명드렸는데 이번에는 마커를 클릭하면 해당 위치로 이동 및 줌인하는 방법에 대해 설명하고자 합니다.

 

먼저 지난번 프로텍트의 마커1 버튼 클릭 이벤트에 아래와 같이 코딩합니다.

 

btnMark1.setOnClickListener(new Button.OnClickListener()
{
    @Override
    public void onClick(View v)
    {
        setMarker(marker1, 33.2712, 126.5354, R.drawable.ic_place_black_24dp, 0);

        marker1.setOnClickListener(new Overlay.OnClickListener()
        {
            @Override
            public boolean onClick(@NonNull Overlay overlay)
            {
                Toast.makeText(getApplication(), "마커1 클릭", Toast.LENGTH_SHORT).show();
                return false;
            }
        });

        CameraUpdate cameraUpdate = CameraUpdate.scrollAndZoomTo(
                new LatLng(33.2712, 126.5354),15)
                .animate(CameraAnimation.Fly, 3000);

        naverMap.moveCamera(cameraUpdate);

    }
});

 

버튼 클릭 이벤트 안에 마커 생성을 하고 마커에 이벤트 주는 부분은 지난번과 동일합니다.

다만, 마커를 생성하고 .moveCamera 메서드를 이용하여 해당 위치로 위치를 이동하는 부분이 추가되었습니다.

 

CameraUpdate cameraUpdate = CameraUpdate.scrollAndZoomTo(
new LatLng(33.2712, 126.5354),15)
.animate(CameraAnimation.Fly, 3000);

 

먼저 CameraUpdate 변수를 선언하고 scrollAndZoomTo 메서드를 이용하여 파라메타로 위치와 애니메이션 값을 설정했습니다.

위치 값은 마커와 동일한 위경도에 Zoom값을 15로 줬기때문에 지정한 위치로 줌인이 될 것입니다.

또한 애니메이션 값은 CameraAnimation.Fly로 설정했는데 Fly외에도 Linear, Easing, none 등이 있습니다.

그리고 그 뒤에는 애니메이션을 지속하는 시간값입니다. 즉, 3초간 애니메이션을 지속합니다.

 

이제 실행해 보면

CameraAnimation. Fly

보시는것과 같이 마커가 생성된 위치로 줌인되는 것을 볼 수 있습니다.

소스를 Linear, Easing, none 등으로 바꿔서 테스트해보시면 차이점을 알 수 있을겁니다.

 

그럼 다음은 마커1이 줌인된 상태에서 마커2 버튼을 누를때 마커2 위치로 이동하는 것을 해보겠습니다.

마커2 버튼 클릭 이벤트에도 아래와 같이 코딩합니다.

 

btnMark2.setOnClickListener(new Button.OnClickListener()
{
    @Override
    public void onClick(View v)
    {
        setMarker(marker2, 33.49957, 126.531076, R.drawable.ic_album_black_24dp, 10);

        marker2.setOnClickListener(new Overlay.OnClickListener()
        {
            @Override
            public boolean onClick(@NonNull Overlay overlay)
            {
                ViewGroup rootView = (ViewGroup)findViewById(R.id.fragment_container);
                pointAdapter adapter = new pointAdapter(MainActivity.this, rootView);

                infoWindow3.setAdapter(adapter);

                //인포창의 우선순위
                infoWindow3.setZIndex(10);
                //투명도 조정
                infoWindow3.setAlpha(0.9f);
                //인포창 표시
                infoWindow3.open(marker2);
                return false;
            }
        });
        CameraUpdate cameraUpdate = CameraUpdate.scrollAndZoomTo(
                new LatLng(33.49957, 126.531076),9)
                .animate(CameraAnimation.Fly, 3000);

        naverMap.moveCamera(cameraUpdate);
    }
});

이번에도 역시 코드는 동일합니다.

그럼 다시 테스트해보면

마커1에서 마커2로 이동하는게 보이는데 위로 올라랐다가 내려오는걸 볼수있습니다.

이게 Fly 효과입니다. 아까는 Linear, Easing, none 효과를 줘도 잘 티가 안났는데 여기서는 확실히 차이가 납니다.

 

이러한 효과는 코딩상 별거 아니지만 유저가 사용할때는 좀 있어보이는 효과를 줄 수 있기때문에 잘 활용하시면 좋을듯합니다.

 

 

PS. 매번 프로젝트만 진행하다가 개인적으로 앱을 하나 출시했습니다.

비록 허접한 앱이기는 하지만 이걸 토대로 몇몇가지 팁에 대해 포스팅을 작성하려고 하오니 아래 포스팅 글 한번 읽어봐 주시면 감사하겠습니다. ^^

andro-jinu.tistory.com/entry/todaysaying1