네이버 지도 API - 마커

네이버 지도 API를 활용하며 지도에 표시되는 마커의 아이콘을 기본으로 제공되는 아이콘 말고 다른 아이콘을 사용하려 한다.

지도 위에 마커를 표시하기 위해서는 OverlayImage 객체를 만들어야 한다. OverlayImage는 아이콘으로 사용될 수 있는 비트맵 이미지를 나타내는 불변 클래스로, 클래스에 정의된 팩토리 메서드를 이용하여 drawable 리소스, asset, 비트맵 등으로부터 객체를 생성할 수 있다.

• fromResource()
  • drawable 리소스로부터 객체 생성
• fromAsset()
  • 앱의 asset에 존재하는 이미지 파일로부터 객체 생성
• fromBitmap()
  • Bitmap으로부터 객체 생성
• fromView()
  • View로부터 객체 생성
  • 호출하는 순간 뷰가 렌더링되고 렌더링된 결과가 비트맵으로 저장됨
• fromFile()
  • 이미지 파일로부터 객체 생성
• fromPath()
  • absolutePath에 위치한 이미지 파일로부터 객체 생성
• fromPrivateFile()
  • Context.openFileInput(String)으로 접근 가능한 이미지 파일로부터 객체 생성

마커 아이콘 뷰 만들기

View로부터 OverlayImage 객체를 만드는 것이 현재 프로젝트에 가장 적합하다고 판단했다.

drawable나 asset 폴더 아래에 존재하는 파일이라면 fromResource()/fromAsset()을 사용하면 편리할 것이다. 하지만 현재 프로젝트에서 기획한 마커 아이콘의 디자인은 왼쪽과 같이 생겼다. 외부 url로부터 가져온 이미지와 테두리, 아래쪽에 막대기가 있다.

따라서 View를 상속받는 클래스를 생성한 후 onDraw()에서 drawRect(), drawCircle(), drawBitmap()로 캔버스에 그려 마커 아이콘 뷰를 만들고자 한다. 외부 url에서 이미지를 불러온 후 완료되면 onDraw() 안에서 도형과 불러온 이미지를 그리는 것이다.

외부 url에서 이미지를 불러오는 것은 coil 라이브러리를 사용했다. 이미지 뷰가 있으면 imageView.load(url)로 쉽게 불러올 수 있는데 View를 상속 받아서 구현하려 했기 때문에 이미지 뷰가 존재하지 않는다.