개인 프로젝트 2022. 5. 16.
맛집 지도 만들기(4) - 지도 클릭 이벤트로 주소 입력 받기 (Nominatim API)
📢 들어가며 이번 포스팅은 지난 포스팅에서 이어진다. 지난 포스팅에선 글꼴, 아이콘 등 구체적인 UI를 구현했었다. 이번 포스팅에선 본격적으로 기능을 구현해볼 것이다. 지도를 클릭했을 때 주소를 입력 받을 수 있게하거나 주소를 입력하면 지도에 위치가 표시되도록 하는 기능을 구현할 것이다. 모든 소스코드는 깃헙에서 확인할 수 있다. 🍜 지도 클릭 이벤트 Openlayers는 지도 클릭 이벤트를 지원한다. 지난 포스팅에서 만들었던 olMap에 클릭 이벤트 기능을 추가해주는 방식으로 구현 가능하다. 일단 본격적인 기능 구현에 앞서, 지도에서 클릭한 부분의 위도, 경도를 받아와지는지 확인하자. olMap 을 생성해준 mounted 부분에, 아래 코드를 추가해보자. // ... import {fromLonLat,..