1. 먼저 지도를 띄울 액티비티에 OnMapClickListener를 달아주어야한다.

* OnMarkerClickListener도 달아주어야 하지만, 나는 이전 강의에서, 그냥 마커 변수에다가 리스너를 달아줬다.


public class MainActivity extends AppCompatActivity implements OnMapReadyCallback, GoogleMap.OnMapClickListener{


2. 마커를 add해줄 때, 입력할 데이터들의  Model 클래스를 만들어주자. 이렇게 모델로 만들어서, 정보창에 한꺼번에 들어가도록 할 것이다.

  이때, 위도, 경도, 제목 정도를 필드(멤버변수)로 넣어준다. 각 객체에서 3가지만 이용하도록 하자.

   3가지 변수를 만들고, 생성자를 만들고, getter/setter도 만들어준다.


public class MarkerModel {

double lat;
double lng;
String title;

public MarkerModel(double lat, double lng, String title) {
this.lat = lat;
this.lng = lng;
this.title = title;
}

public double getLat() {
return lat;
}

public void setLat(double lat) {
this.lat = lat;
}

public double getLng() {
return lng;
}

public void setLng(double lng) {
this.lng = lng;
}

public String getTitle() {
return title;
}

public void setTitle(String title) {
this.title = title;
}
}


3.  addMarker를 커스텀으로 정의해준다. api의 addMarker와 다르게, MarkerModel 변수, 마커가 선택되어있는지 유무를 파라미터로 받는다.

 MarkerModel 객체(위도,경도,제목) 와 클릭된 상태 유무(isSelectedMarker)를 같이 받아서 ->

  (1)  MakerModel.get변수명으로 위도와 경도, 제목을 빼내어서 --> 마커옵션에 정보를 넣는다.

  (2) 클릭된 상태유무를 받아서, 다른 이미지를 보여주도록 if문으로 --> 마커옵션에 icon을 설정한다.

 >  그 마커옵션으로 실제 공식 addMarker하는 mMap변수에 .addMarker(마커옵션);을 통해 mMap에 마커를 찍는다. 

     원래 api상에서, addMarker는 반환형이 Marker이다. 맵변수.addMarker(마커옵션);을 통해 Marker가 반환된다.


  ***아직 입력받은 위도, 경도, title중에 title만 표시한다.

    public Marker addMarker(MarkerModel markerModel, boolean isSelectedMarker) {


LatLng position = new LatLng(markerModel.getLat(), markerModel.getLng());
String title = markerModel.getTitle();

/* tv_marker.setText(title);

if (isSelectedMarker) {
tv_marker.setBackgroundResource(R.drawable.ic_marker_phone_blue);
tv_marker.setTextColor(Color.WHITE);
} else {
tv_marker.setBackgroundResource(R.drawable.ic_marker_phone);
tv_marker.setTextColor(Color.BLACK);
}*/


//작업5. for문을 돌고 있는 addMarker는 , 돌면서 하나하나에 , 제목,위치,아이콘을 넣는다.
MarkerOptions markerOptions = new MarkerOptions();
markerOptions.title(title);
markerOptions.position(position);

//작업6. 마커에 옵션으로 아이콘을 배치하는데, 클릭에 따라서 다른 아이콘 배치
if (isSelectedMarker) {
markerOptions.icon(BitmapDescriptorFactory.
fromResource(R.drawable.ic_directions_bus_blue_24dp));
} else {
markerOptions.icon(BitmapDescriptorFactory.
fromResource(R.drawable.ic_directions_bus_black_24dp));
}

return mMap.addMarker(markerOptions);
}


4. 이제, MarkerModel형식으로 직접 마커를 넣어주는 매쏘드 getSampleMarkerItems()를 만들어준다.

   ArrayList<MarkerModel> 형식의 list에다가 .add로, 찍어줄 마커들의 정보를 담아서 넣는다.

    -> list에 담긴 마커(위,경,좌표)들은 for문을 통해서, <선택되었는지 유무인 isSelectedMarker>를 초기화로서 false로 같이 입력하여

   정의해준 addMarker의 파라미터에 들어간다.


private void getSampleMarkerItems() {

ArrayList<MarkerModel> sampleList = new ArrayList();

//작업4. 원래는 서버에서 받을 정보
sampleList.add(new MarkerModel(35.050917, 126.723083, "나주농협 송현지점(하행)"));
sampleList.add(new MarkerModel(35.050733, 126.723019, "나주농협 송현지점(상행)"));
sampleList.add(new MarkerModel(35.050538, 126.720457, "동신대 종점"));
sampleList.add(new MarkerModel(35.049065, 126.720265, "나주동신대(하행)"));


for (MarkerModel markerModel : sampleList) {
addMarker(markerModel, false);
}
}


5. 클릭시 넘어올 때, 선택된 마커로서, 겹쳐서 색칠된 아이콘을 띄워줄 마커를 전역변수로 추가한다.

private Marker selectedMarker;

6. mMap. 클릭리스너 내부에, 클릭시 <넘어오는 마커 - 위,경,제목의 정보를 가짐>를 이용해서 아이콘을 겹쳐서 생성/삭제 하는 changeSelectedMarker()를 만든다.

 (1) 이전에 클릭되서 기존 색칠된 아이콘이 띄워져 있을 경우, 삭제하는 처리

  1.selectedMarkernull아니라서 띄워져있다면 의 정보를 빼내서

          그자리에 색칠안된 일반 마커가 찍히도록 addMarker(selectedMarker, false)를 통해 찍어준다.

2.selectedMarker의 자리에 색칠 안된 마커가 찍혀지게 됬으므로 삭제해준다.
3.정보창은 클릭되서 넘어온 marker자리에 정보창을 띄워준다.

 (2) 클릭된 자리에, 색칠마커에 정보를 넣어주고, 클릭된 자리의 색칠안된 마커는 없애주는 처리

1.넘어오는 markernull만 아니면 (기본적으로클릭되서 넘어온 Maker에서 위,,제목을 이용해
추가적으로 addMarker모델, true );로  선택됬을 때 나오는 아이콘겹쳐서 하나 더  찍어주고, marker정보를 selectedMarker에 넣는다.
2. 넘어오는 marker는 이제 지워준다(marker.remove();)

3. selectedMarker의 정보창을 띄워준다.
private void changeSelectedMarker(Marker marker) {

//작업 12. 최고난도,

// 선택했던 마커 되돌리기
if (selectedMarker != null) {
addMarker(new MarkerModel(selectedMarker.getPosition().latitude,selectedMarker.getPosition().longitude,selectedMarker.getTitle()), false);
selectedMarker.remove();

marker.showInfoWindow();
}

// 선택한 마커 표시
if (marker != null) {
selectedMarker = addMarker(new MarkerModel(marker.getPosition().latitude,marker.getPosition().longitude,marker.getTitle()), true);
marker.remove();
selectedMarker.showInfoWindow(); //클릭리스너를 달면, 클릭->정보창 안떴는데, 클릭리스너안에 showInfoWindow()를 호출하면 정보창도 같이 뜬다!!
}
}




7. 과제 

아직 입력받은 위도, 경도, title중에 title만 addMarker( , ){}속에서 마커옵션으로 넣어준다.

나는 커스텀xml에, recyclerview를 넣고, 어댑터에다가 파싱한 정보를 뿌려줘야한다.




  1. 오소리 2019.08.06 11:07

    우선 좋은글 감사드립니다
    한의대 공부하면서 프로그램까지 대단 하시네요
    마커모델에 데이타 값을 추가 하고
    가령 가격,거래일시등;
    마커옵션.icon에 커스텀 레이아웃(xml)을 인플레이트해서 보여주는 방법이 있던데
    잘 실행이 안돼네요

+ Recent posts