[흡구오디] FireStore의 데이터 가져와서 화면에 띄워주기

안냐세요?

 

오늘은 Firestore에서 document와 data들을 가져와서 지도에 띄워줄거예요

 

레쯔고

 

우선 데이터를 입력하고 저장을 해야겠죠?

저장하는 부분은 저번 게시글에서 포스팅 했었으니 참고!

 

https://dev-23g.tistory.com/172

 

그렇담 이제 저장된 데이터들을 가져오자

데이터 가져오기

// MARK: Area Marker
  
  private func smokingAreas() {
  	// 실시간으로 데이터 가져오는 addSnapshotListener 사용
    db.collection("smokingAreas").addSnapshotListener { snapshot, error in
      guard let snapshot = snapshot else { return }
      for doc in snapshot.documents {
        let data = doc.data()
        guard let name = data["name"] as? String else { return }
        guard let description = data["description"] as? String else { return }
        guard let areaLat = data["areaLat"] as? Double else { return }
        guard let areaLng = data["areaLng"] as? Double else { return }
        
        // 마커를 생성해서
        let areaMarker = NMFMarker()
        // 마커의 이미지는 내가 준비해둔 이미지로 지정
        areaMarker.iconImage = NMFOverlayImage(name: "marker_Pin")
        // 위에서 가져온 데이터들에 마커를 찍어줘요
        areaMarker.position = NMGLatLng(lat: areaLat, lng: areaLng)
        // 마커를 지도 위에 올림!
        areaMarker.mapView = self.mapView.mapView
      }
    }
  }

 

그렇게 완성된 모습은~

 

마커가 잘 나오는군요??

 

한가지 개선점을 꼽아보자면

마커들이 겹쳐보이는 현상 발생!

 

layer에 shadow 효과를 줘야할까? 생각했는데 마커에는 지원하지 않음,,!

 

 

그러다 생각한 방법~

바로 마커에 외곽선을 주면 해결됨

 

ㅇㅏ싸

 

 

이제 겹친 마커들도 구분이 잘 되쥬?

 

 

GS 칼텍스에 장소 추가 잘되는 모습 확인~

 

그럼 다음 포스팅에서 만나요