반응형 카카오맵 api2 [자바스크립트] 카카오맵 API 이용해 카테고리 장소 마커로 보여주기 카카오맵 API를 이용해서 지도 영역 내에 숙박과 음식점을 마커로 표시하고, 마커를 클릭하면 장소에 대한 정보를 노출하고 있습니다. 내 위치로 지도를 이동하는 버튼과, 카테고리를 선택하는 버튼도 생성하였습니다. 소스코드 설명 panTo() 내 위치로 지도를 이동시키는 기능입니다. get_latitude, get_longitude 변수를 사용하여 사용자의 위도와 경도 정보를 얻습니다. map.panTo() 함수를 호출하여 지도의 중심을 해당 위치로 이동시킵니다. kakaomap() 지도를 초기화하고, 필터 옵션을 사용하여 장소를 검색하고 마커를 표시합니다. kakao.maps.event.addListener() 함수를 사용하여 지도의 idle(정지) 상태일 때 searchPlaces() 함수를 호출합니다... 개발이야기/자바스크립트 2023. 7. 25. [자바스크립트] 카카오맵 API 이용해 폴리곤으로 대한민국(시/도) 구분하기 아래 코드는 gson.json의 지리적 데이터를 사용하여 시/도를 다각형으로 표시하고, 마우스 이벤트에 따라 지역을 표시하고 지역을 클릭하면 해당 지역의 중심으로 맵을 확대하는 여러 가지 기능을 카카오 맵 API를 통해 구현해 봤습니다. 소스코드 설명 displayMap GeoJSON 데이터 파일을 가져와서 displayMap 함수에 좌표와 이름을 넣고 호출합니다. 좌표를 사용해 다각형을 생성하고 맵에 표시합니다. 또한 다각형과의 마우스 오버, 마우스 이동, 마우스 아웃 및 클릭에 대한 이벤트 리스너를 설정합니다. centerMap 다각형의 꼭짓점 좌표를 기반으로 다각형의 중심점(중심)을 계산합니다. overlaySet 지역 이름이 표시된 커스텀 오버레이를 설정합니다. 다각형의 중심점을 계산하고 해당 위.. 개발이야기/자바스크립트 2023. 7. 24. 이전 1 다음 💲 추천 글 반응형