본문 바로가기

오늘의 공부/android

[모두의 안드로이드] 5일차 관광지도 앱 만들기 .2 마커 표시하기

참고서적:모두의 안드로이드

*제가 직접 사서 참고하고 있습니다.

개발환경:우분투 20.04 lts


 

 

[1.구글 지도에서 원하는 위치의 경도 좌표 알아내기]

www.google.com/maps  

 

Google Maps

Find local businesses, view maps and get driving directions in Google Maps.

www.google.com:443

구글 맵에 들어가 원하는 장소를 검색하고 마커(빨간색 포인터)오른쪽을 클릭하여 "이곳이 궁금한가요" 탭을 클릭하면

해당 장소에 대한 위도 경도가 숫자로 하단에 표시가 됩니다.

 

1)화서문(37.285618, 127.009671)

2)화령전(37.283117, 127.012601)

3)방화수령전(37.287617, 127.018057)

 

이 좌표들을 에뮬레이터에 마커로 표시해보겠습니다.

 

[2. 구글 지도(에뮬레이터)에  마커 표시하기]

 

[2.1 MapsActivity.java  설정하기]

 

구글 맵으로 구한 좌표들을 입력해줍니다.

 

[변경 전]

[변경 후]

 

[지도 실행해보기]

클릭하면 title이 뜬다.

 

[3.여러 위치 좌표 추가]

//화서문 위도 경도 좌표 넣기
  LatLng suwon1 = new LatLng(37.285618, 127.009671);
  mMap.addMarker(new MarkerOptions().position(suwon1).title("화서문"));

//화령전 위도 경도 좌표 넣기
  suwon1 = new LatLng(37.283117, 127.012601);
  mMap.addMarker(new MarkerOptions().position(suwon1).title("화령전"));

//방화수령전 위도 경도 좌표 넣기
  suwon1 = new LatLng(37.287617, 127.018057);
  mMap.addMarker(new MarkerOptions().position(suwon1).title("방화수령전"));

  mMap.moveCamera(CameraUpdateFactory.newLatLng(suwon1));
  mMap.moveCamera(CameraUpdateFactory.newLatLngZoom(suwon1,14));//지도를 14배율로 확대해서 보여줌

 

 

 

 

여러 마커가 뜨는 것을 확인 할 수 있습니다.

 

 

[4.마커 기능 개선하기]

 

클릭했을 때  타이틀 뿐 아니라 간단한 정보도 같이 표시되게 수정해보겠습니다. 각 mMap.addMaker에 

 .snippet 추가하겠습니다.

 

[실행결과]

스니펫 기능이 잘 적용된 것을 볼 수 있습니다

 

 

[5.마커와 url  연결]

마커를 클릭하면 특정 웹사이트에 들어가는 기능을 추가해보겠습니다.

 

저는 화서문 마커를 클릭하면 수원 문화재단 웹사이트(https://www.swcf.or.kr/)가 열리게 해보겠습니다.

 

[변경 전]

[변경 후]

여기선 화서문이라는 타이틀의 마커를 클릭시 해당 페이지로 연결되게 했습니다.

 

 

 

[실행 화면]

해당 url로 연결이 잘 되는 것을 확인할 수 있습니다.

 

 

 

 

*더 공부해야 될 것들

인텐트,스니펫