이번 포스팅에서는 네이버 클라우드 플랫폼에서 제공하는 네이버지도의 MapView 기능을 안드로이드 스튜디오에서 사용하는 방법을 살펴보도록 하겠습니다.
이전 포스트에서 네이버 지도를 사용하기 위한 네이버 클라우드 플랫폼 가입 및 설정을 하고 안드로이드 스튜디오에서 설정하는 법은 설명하였습니다.
2020/06/15 - [안드로이드스튜디오 개발] - [안드로이드 스튜디오] 네이버 지도 #1 - 가입 및 설정
[안드로이드 스튜디오] 네이버 지도 #1 - 가입 및 설정
이번 포스팅에서는 네이버 클라우드 플랫폼에서 제공하는 네이버 지도를 안드로이드 스튜디오에서 사용하는 방법을 살펴보도록 하겠습니다. 안드로이드 스튜디오에서 네이버 지도을 사용하기
andro-jinu.tistory.com
이번 포스트에서는 MapView를 이용하여 네이버 지도를 제어하는 것을 해볼까합니다.
안드로이드스튜디오 프로젝트는 위 포스트에서 생성한것을 계속 사용합니다.
먼저 layout의 activity_main.xml 부분을 수정합니다.
저번 포스트에서는 네이버지도가 제대로 표출되는지 테스트하기 위하여 fragment를 사용하였으나 이번에는 fragment 대신에 MapView를 사용합니다.
소스코드는 다음과 같습니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!-- 네이버 지도 -->
<com.naver.maps.map.MapView
android:id="@+id/map_view"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
|
cs |
별다른 설정은 없고 필요한 설정은 코딩으로 처리합니다.
MainActivity는 최초 프로젝트를 생성했을 시 아래와 같을 겁니다.
여기서 먼저 네이버지도의 이벤트를 처리할 콜백함수를 implements 합니다.
빨간색 밑줄과 함께 빨간색 전구에 불이 들어왔네요
콜백함수를 처리할 함수가 없어서 그런 것이니 빨간 전구를 누르고 implement methods를 눌러줍니다.
여기서 onMapReady를 선택하고 OK버튼!!!
이제 onCreate() 함수에 초기화 부분을 코딩하고 onMapready() 부분에 네이버지도를 위한 부분을 코딩할 겁니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
|
package com.test.navermap;
import android.os.Bundle;
import androidx.annotation.NonNull;
import androidx.appcompat.app.AppCompatActivity;
import com.naver.maps.map.MapView;
import com.naver.maps.map.NaverMap;
import com.naver.maps.map.OnMapReadyCallback;
public class MainActivity extends AppCompatActivity implements OnMapReadyCallback
{
private MapView mapView;
private static NaverMap naverMap;
@Override
protected void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
//네이버 지도
mapView = (MapView) findViewById(R.id.map_view);
mapView.onCreate(savedInstanceState);
mapView.getMapAsync(this);
}
@Override
public void onMapReady(@NonNull NaverMap naverMap)
{
}
}
|
cs |
먼저 onCreate() 함수에
MapView mapView = (MapView) findViewById(R.id.map_view);
mapView.onCreate(savedInstanceState);
mapView.getMapAsync(this);
이렇게 코딩합니다.
private MapView mapView;
private static NaverMap naverMap;
이 변수들은 나중에 지도를 제어할 때 사용됩니다.
layout의 MapView를 지정하고
MapView를 생성하고
싱크를 걸어줍니다. 싱크는 네이버지도에서 반환되는 콜백함수를 자신(this)으로 지정하는 역할을 합니다.
이렇게만 코딩하시고 실행하셔도 네이버지도는 잘 뜨는걸 확인할 수 있습니다.
네이버지도의 디폴트위치가 광화문으로 되어있어서 아무 설정이 없으면 광화문을 중심으로 표시되게 됩니다.
이번에는 최초 표출될 위치를 변경해보도록 하겠습니다.
|
1
2
3
4
5
6
7
8
9
10
11
|
@Override
public void onMapReady(@NonNull NaverMap naverMap)
{
this.naverMap = naverMap;
CameraPosition cameraPosition = new CameraPosition(
new LatLng(33.38, 126.55), // 위치 지정
9 // 줌 레벨
);
naverMap.setCameraPosition(cameraPosition);
}
|
cs |
콜백함수에서 받아온 네이버지도 객체를 전역변수에 저장합니다.
this.naverMap = naverMap;
카메라위치를 변경하기 위하여 CameraPosition변수를 선언하고 생성할때 위치(위경도)와 줌레벨을 지정합니다.
CameraPosition cameraPosition = new CameraPosition(
new LatLng(33.38, 126.55), // 위치 지정
9 // 줌 레벨
);
변경된 위치를 반영하기 위하여 setCameraPosition함수를 사용하여 값을 반영합니다.
naverMap.setCameraPosition(cameraPosition);
위도:33.38, 경도:126.55 는 제주도 중심 정도 됩니다.
이제 실행해 보면 아래와 같이 제주도 부근으로 변경된 걸 볼수있습니다.
여기서 위경도와 줌레벨은 필수 디폴트값이고 추가로 tilt(기울임 각도), bearing(베어링 각도)를 추가로 지정할 수 있습니다.
tilt의 디폴트값은 위에서 내려다보는 90도이고 값을 주면 비스듬히 바라보게 변경할 수 있습니다.
bearing의 디폴트값을 북쪽을 위쪽으로 향하게 되며 변경하면 동서남북의 방향을 조정할 수 있습니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
@Override
public void onMapReady(@NonNull NaverMap naverMap)
{
this.naverMap = naverMap;
CameraPosition cameraPosition = new CameraPosition(
new LatLng(33.38, 126.55), // 위치 지정
12, // 줌 레벨
45, // 기울임 각도
45 // 방향
);
naverMap.setCameraPosition(cameraPosition);
}
|
cs |
위치는 제주도, 줌레벨은 9, 45도 각도로 기울이고, 북쪽은 45도 방향으로 했습니다.
좌측 상단의 나침반이 45도 돌아간게 보이네요. bearing에 값을 주면 나침반은 자동으로 표시됩니다.
근데 tilt는 잘 구분이 안되네요
tilt는 확대해서 보시면 위쪽은 좀 작게 밑쪽은 조금 크게 보이는데 잘 느껴지지는 않습니다.
단, 지도 상에 건물의 높이까지 표시하시고 보시면 좀 확실히 느껴집니다.
지도상에 건물 표시는 아래와 같이 하며 tilt를 주지 않으면 건물은 표시되지 않습니다.
naverMap.setLayerGroupEnabled(naverMap.LAYER_GROUP_BUILDING, true);
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
@Override
public void onMapReady(@NonNull NaverMap naverMap)
{
this.naverMap = naverMap;
//건물 표시
naverMap.setLayerGroupEnabled(naverMap.LAYER_GROUP_BUILDING, true);
CameraPosition cameraPosition = new CameraPosition(
new LatLng(33.38, 126.55), // 위치 지정
9, // 줌 레벨
45, // 기울임 각도
45 // 방향
);
naverMap.setCameraPosition(cameraPosition);
}
|
cs |
 |
 |
왼쪽은 tilt를 0으로, 오른쪽은 tilt를 45로 한겁니다.
왼쪽은 건물이 표시안되고 오른쪽은 건물 높이가 표시되는게 보일겁니다. 그리고 tilt를 주면 비스듬하게 바라보는것처럼 원근감이 표시됩니다.
다음은 배경 지도를 바꿔보도록 하겠습니다.
기본적으로 네이버지도에서 제공되는 지도는
Basic, Navi, Satellite, Hybrid, Terrain 등 5가지 입니다.
기본 디폴트는 Basic입니다.
위성지도로 바꿀려면 아래와 같이 코드를 추가합니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
@Override
public void onMapReady(@NonNull NaverMap naverMap)
{
this.naverMap = naverMap;
//배경 지도 선택
naverMap.setMapType(NaverMap.MapType.Satellite);
//건물 표시
naverMap.setLayerGroupEnabled(naverMap.LAYER_GROUP_BUILDING, true);
//위치 및 각도 조정
CameraPosition cameraPosition = new CameraPosition(
new LatLng(33.38, 126.55), // 위치 지정
9, // 줌 레벨
45, // 기울임 각도
45 // 방향
);
naverMap.setCameraPosition(cameraPosition);
}
|
cs |
아래와 같이 위성지도로 바뀌었네요
나머지 옵션은 하나씩 테스트 해보시면 차이점을 아실 수 있을 겁니다.
단, 배경지도에 따라서 표현할 수 있는 옵션이 달라지니 아래 표를 참조하세요
| Basic | Navi | Satellite | Hybrid | Terrain | |
| 실시간 교통정보 | O | O | O | O | O |
| 건물 | O | O | O† | O† | |
| 대중교통 | O | O | O | O | |
| 자전거 | O | O | O | O | |
| 등산로 | O | O | O | O | |
| 지적편집도 | O | O | O | O |
†: 활성화할 경우 건물 주소, 입구 등에 대한 심벌만 노출됩니다.
다른 옵션으로는 실시간 교통정보, 레이어 그룹, 실내지도, 야간모드, 라이트 모드, 지도밝기, 건물높이, 심벌크기 및 원근 효과 등등이 있는데 모두 위 설정할 것과 비슷하게 처리가 가능하니 아래 링크를 참조하셔서 하나씩 테스트 해보시면 좋을 듯합니다.
마지막으로 MapView를 사용할때 주의하실것은 MapView를 사용할 때는 반드시 MapView가 포함된 액티비티의 라이프 사이클에 맞추어 onCreate(), onStart(), onResume(), onPause(), onStop(), onDestroy(), onSaveInstanceState(), onLowMemory()를 호출해야 합니다.
단, MapView가 프래그먼트에 포함될 경우 프래그먼트의 onCreateView() 또는 onViewCreated()에서 onCreate()를, onDestroyView()에서 onDestroy()를 호출해야 합니다. 그렇지 않으면 지도가 정상적으로 동작하지 않습니다. MapFragment를 사용하면 이러한 절차가 필요하지 않습니다.
그래서 최종 MainActivity 소스는 아래와 같습니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
|
package com.test.navermap;
import androidx.annotation.NonNull;
import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.util.Log;
import android.widget.Toast;
import com.naver.maps.geometry.LatLng;
import com.naver.maps.map.CameraPosition;
import com.naver.maps.map.MapView;
import com.naver.maps.map.NaverMap;
import com.naver.maps.map.OnMapReadyCallback;
public class MainActivity extends AppCompatActivity implements OnMapReadyCallback
{
private MapView mapView;
private static NaverMap naverMap;
@Override
protected void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
//네이버 지도
mapView = (MapView) findViewById(R.id.map_view);
mapView.onCreate(savedInstanceState);
mapView.getMapAsync(this);
}
@Override
public void onMapReady(@NonNull NaverMap naverMap)
{
this.naverMap = naverMap;
//배경 지도 선택
naverMap.setMapType(NaverMap.MapType.Satellite);
//건물 표시
naverMap.setLayerGroupEnabled(naverMap.LAYER_GROUP_BUILDING, true);
//위치 및 각도 조정
CameraPosition cameraPosition = new CameraPosition(
new LatLng(33.38, 126.55), // 위치 지정
9, // 줌 레벨
45, // 기울임 각도
45 // 방향
);
naverMap.setCameraPosition(cameraPosition);
}
@Override
public void onStart()
{
super.onStart();
mapView.onStart();
}
@Override
public void onResume()
{
super.onResume();
mapView.onResume();
}
@Override
public void onPause()
{
super.onPause();
mapView.onPause();
}
@Override
public void onStop()
{
super.onStop();
mapView.onStop();
}
@Override
protected void onDestroy() {
super.onDestroy();
mapView.onDestroy();
}
@Override
public void onSaveInstanceState(Bundle outState)
{
super.onSaveInstanceState(outState);
mapView.onSaveInstanceState(outState);
}
@Override
public void onLowMemory()
{
super.onLowMemory();
mapView.onLowMemory();
}
}
|
cs |
이번 포스트에서는 간단하게 MainActivity에 네이버 지도를 표출하였는데 다음 포스트에서는 플래그먼트에 표출하는걸 해보도록 하겠습니다. 액티비티나 플래그먼트나 별 차이가 없어서 다음 포스트는 짧아질거 같네요
PS. 매번 프로젝트만 진행하다가 개인적으로 앱을 하나 출시했습니다.
비록 허접한 앱이기는 하지만 이걸 토대로 몇몇가지 팁에 대해 포스팅을 작성하려고 하오니 아래 포스팅 글 한번 읽어봐 주시면 감사하겠습니다. ^^
andro-jinu.tistory.com/entry/todaysaying1
[안드로이드 스튜디오] 앱 출시 소식 - 오늘의 명언(명언, 고사성어, 속담)
아주 오랜만에 포스팅을 하게 됐네요 그동안 다른 프로젝트로 매우 바뻤던 관계로 한동안 포스팅을 못했는데 요즘 짬이 나서 간단하게 앱을 만들고 출시까지 하였습니다. 그동안은 앱을 만들긴
andro-jinu.tistory.com
'안드로이드스튜디오 개발' 카테고리의 다른 글
| [안드로이드 스튜디오] 네이버 지도 #6 - 커스텀 정보창(InfoWindow) 표시하기 (5) | 2020.06.16 |
|---|---|
| [안드로이드 스튜디오] 네이버 지도 #5 - 정보창(InfoWindow) 표시하기 (0) | 2020.06.15 |
| [안드로이드 스튜디오] 네이버지도 #4 - 마커 표시 및 이벤트처리 (3) | 2020.06.15 |
| [안드로이드 스튜디오] 네이버지도 #3 - 플래그먼트에서 표출하기 (0) | 2020.06.15 |
| [안드로이드 스튜디오] 네이버 지도 #1 - 가입 및 설정 (4) | 2020.06.15 |
댓글