<최종 화면> Google API를 사용하여 지도를 보여준다.
이 과정에서 Map API키 발급받음.
작업하기 전에 AVD를 켜놓자.
작업할 경로에서 RN19GoogleMapTest를 init하자.
빌드 에러가 난다.
이제 구글 지도를 사용하기 위해 API 키 발급을 해야한다.
Map에 관련된 것이기 때문에 Products에 Maps Platform을 선택하자.
https://developers.google.com/
문서탭으로 이동하자.
문서탭에서 Android 관련으로 아래 사진과 같이 선택하자.
좌측에 Get an API Key가 있을 것이다. 해당 메뉴에서 key 발급 방법을 알아보자.
그전에 구글 로그인이 되어있어야 한다.
( 프로젝트가 있다면 굳이 안만들어도 된다. )
임의로 프로젝트명을 쓴다. 자신이 원하는 프로젝트명
만들어도 자신이 만든 프로젝트가 선택되어 있는지 확인을 하고 작업하자.
API라이브러리를 하고자하는 것을 선택하면 된다. 예제는 Android 기준으로 하겠다.
발급 받은 키를 AndroidManifest에 추가하자.
|
1
2
3
|
아래 해당하는 애플리케이션을 선택하고 항목 추가를 클릭하자.
그러면 두 개의 입력 칸이 나올 것이다.
두 항목을 작성하려면 패키지명과 SHA-1 값이 필요하다.
1.패키지명은 AndroidManifest 파일을 보면 간단히 알 수 있다.
2. SHA-1 값은 cmd창을 통해서 알아내자.
내가 init 한 프로젝트까지 접근하여 자동으로 생성되어 있는 android에 접근한다. 거기서 아래 사진처럼 명령어를 입력하자.
그러면 여러개의 값들이 나오는데 연습할 것이기 때문에 Variant : debug , Config : debug에 해당하는 SHA1 값을 복사해오자.
만약 구글 스토어에 올릴 용이면 Variant : release , Config : debug에 해당하는 값을 사용하면 된다.
항목 추가란에 적절히 넣자.
이제 android 작업 공간에서 나오고 run을 하자.
기존 빨간색 마커도 사용하지만 다른 흑백 마커를 주기 위해 이미지를 추가했다.
Main.js
|
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
|
import React, {Component} from 'react';
import {View, Text, Linking} from 'react-native';
import MapView, { PROVIDER_GOOGLE, Marker } from 'react-native-maps';
export default class Main extends Component{
constructor(){
super();
region:{
latitude:37.562087,
longitude:127.035192,
// 얼마의 위도경도 차이까지 지도에 표시되는가 (zoom 설정)
latitudeDelta:0.009,
longitudeDelta:0.004,
},
markers:[{
latlng:{latitude:37.562516, longitude:127.035679},
title:"희망약국",
description:"왕십리에 있는 약국"
},
{
latlng:{latitude:37.562516, longitude:127.037},
title:"희망약국2",
description:"왕십리에 있는 약국"
}],
}
}
render(){
return(
<View style={{flex:1, padding:16,}}>
<Text style={{padding:8,}}>Map Test</Text>
<MapView
style={{flex:1,}}
provider={PROVIDER_GOOGLE}
initialRegion={
// {
// latitude:37.562087,
// longitude:127.035192,
// // 얼마의 위도경도 차이까지 지도에 표시되는가 (zoom 설정)
// latitudeDelta:0.009,
// longitudeDelta:0.004,
// }
}>
{/* 마커 추가 */}
<Marker
coordinate={this.state.region}
title="미래능력개발교육원"
description="http://wwww.mrhi.or.kr"
onCalloutPress={this.clickCallout}></Marker>
<Marker
coordinate={{latitude:37.561727, longitude:127.036370}}
title="성동경찰서"
{/* 마커여러개 동시에 찍기 */}
{
return <Marker
coordinate={marker.latlng}
title={marker.title}
description={marker.description}
key={index}
</Marker>
})
}
</MapView>
</View>
);
}
clickCallout=()=>{
//alert('aaa');
// 특정 URL의 웹문서를 디바리스의 웹브라우저를 통해 열기
Linking.openURL('http://www.mrhi.or.kr');
}
}
|
<복붙용 코드>
|
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
|
import React, {Component} from 'react';
import {View, Text, Linking} from 'react-native';
import MapView, { PROVIDER_GOOGLE, Marker } from 'react-native-maps';
export default class Main extends Component{
constructor(){
super();
region:{
latitude:37.562087,
longitude:127.035192,
// 얼마의 위도경도 차이까지 지도에 표시되는가 (zoom 설정)
latitudeDelta:0.009,
longitudeDelta:0.004,
},
markers:[{
latlng:{latitude:37.562516, longitude:127.035679},
title:"희망약국",
description:"왕십리에 있는 약국"
},
{
latlng:{latitude:37.562516, longitude:127.037},
title:"희망약국2",
description:"왕십리에 있는 약국"
}],
}
}
render(){
return(
<View style={{flex:1, padding:16,}}>
<Text style={{padding:8,}}>Map Test</Text>
<MapView
style={{flex:1,}}
provider={PROVIDER_GOOGLE}
initialRegion={
// {
// latitude:37.562087,
// longitude:127.035192,
// // 얼마의 위도경도 차이까지 지도에 표시되는가 (zoom 설정)
// latitudeDelta:0.009,
// longitudeDelta:0.004,
// }
}>
{/* 마커 추가 */}
<Marker
coordinate={this.state.region}
title="미래능력개발교육원"
description="http://wwww.mrhi.or.kr"
onCalloutPress={this.clickCallout}></Marker>
<Marker
coordinate={{latitude:37.561727, longitude:127.036370}}
title="성동경찰서"
{/* 마커여러개 동시에 찍기 */}
{
return <Marker
coordinate={marker.latlng}
title={marker.title}
description={marker.description}
key={index}
</Marker>
})
}
</MapView>
</View>
);
}
clickCallout=()=>{
//alert('aaa');
// 특정 URL의 웹문서를 디바리스의 웹브라우저를 통해 열기
Linking.openURL('http://www.mrhi.or.kr');
}
}
|
'안드로이드 웹앱 콘테츠 개발자 양성(국비지원) > HybridApp' 카테고리의 다른 글
| HybridApp-React Native 2세대 (기능 - DataArchitecture ) (0) | 2020.01.30 |
|---|---|
| 아직 내용 수정 안함 HybridApp-React Native 2세대 (기능 - Stateful(extends),Stateless(함수형) Component) (0) | 2020.01.30 |
| HybridApp-React Native 2세대 (기능 - Geolocation API ) (0) | 2020.01.29 |
| HybridApp-React Native 2세대 (기능 - AsyncStorage API ) (0) | 2020.01.29 |
| HybridApp-React Native 2세대 (기능 - Lifecycle Method) (0) | 2020.01.28 |
댓글