🛠️ Project/🗺️ Kakao Maps API

기존 코드지도에 마커만 찍혀 있으면 순서를 알아보기 어렵다.기존 코드는 아래처럼 마커를 표시했지만 장소 1-2-3-.. 순서대로 경로를 이어주지 않아서 순서를 알아보기가 쉽지 않다. 경로를 알아보기 쉽게 폴리라인을 이어서 나타내기우선 카카오 지도 API 공식 문서와 공식 샘플 확인해보자.- Polyline 관련 공식 문서https://apis.map.kakao.com/web/documentation/#Polyline- 지도에 도형 표시하는 샘플https://apis.map.kakao.com/web/sample/drawShape/// 선을 구성하는 좌표 배열입니다. 이 좌표들을 이어서 선을 표시합니다var linePath = [ new kakao.maps.LatLng(33.452344169439975..

마커 이미지 색상 변경하기날짜별 장소를 구별할 수 있도록 마커 색상을 다르게 지정해야 했다.그런데 카카오 지도 API 기본 마커 이미지는 파란색 밖에 없어서 아래 사이트에서 색상만 조절해서 6가지 색상으로 만들었다! https://photokit.com/editor/?lang=ko 사진 편집기 - PhotoKit.com photokit.com 변경된 마커 이미지 적용하기1. 프로젝트 파일 내부에 마커 이미지 6개를 넣어놓고 markerImages에 1~6까지 파일 경로를 할당한다. 2. 장소를 선택하면 addSelectedMarker 함수가 호출된다.마커 이미지를 6개 만들어두었으니 이미지가 순환되도록 만들면 1일차와 7일차는 같은 색상의 마커 이미지를 쓴다.imageSrc에 마커 이미지 경로를 할당하려..

기존 예시 코드의 지도 범위 설정 기준 https://apis.map.kakao.com/web/sample/keywordList/내가 사용한 샘플 코드인 '키워드로 장소검색하고 목록으로 표출하기' 코드는 displayPlaces() 메서드 내에서 지도 범위를 설정한다. 현재 코드는 아래 흐름으로 동작한다. 1. 키워드로 검색 -> 검색 결과 목록이 나옴2. for문을 돌면서 검색 결과 목록에 있는 장소의 좌표들이 다 포함된 영역(.extend())으로 지도 범위가 설정됨(.setBounds())3. 즉, 검색 결과 목록 2페이지로 넘어가게되면 2페이지에 있는 장소들이 모두 보이는 범위로 재설정됨원래 샘플 코드는 검색 결과 목록에 있는 모든 장소들이 지도에 마커로 표시되는 것이지만, 나는 수정해서 내가 원..

이미 선택한 장소의 제거 버튼을 클릭하면 지도에 있는 마커가 삭제되도록 만들어보자. 1. 선택한 장소들의 배열인 selectedPlaces에서 제거할 장소를 찾아서 지우기2. 선택한 장소들의 마커 배열인 markers에서 제거할 장소를 찾아서 지우기3. 장소를 제거했으니 순서에 맞게 마커 숫자를 재정렬하기 장소 선택 버튼 클릭 이벤트 핸들러 메서드와 동일하게 제거 버튼 클릭 이벤트 핸들러 메서드도 event, place, placePosition을 파라미터로 넘겨주도록 작성했다.function handleRemoveBtnClick(event, place, placePosition) { 선택한 장소들의 배열인 selectedPlaces에서 제거하기같은 장소인지 구별하는 방법은 파라미터로 넘어온 선택한 장소..

보완해야했던 문제를 해결해보자이전 게시글에 있던 보완해야할 점을 해결해보자.2024.09.12 - [🛠️ Project/🗺️ Kakao Maps API] - [카카오 지도 API] 장소 검색 목록에서 선택한 장소만 지도에 마커 표시하기검색 결과 목록에서 항목을 선택하면 마커가 표시된다. 하지만 현재는 선택한 순서대로 마커에 번호가 매겨지는 것이 아닌, 검색 결과 목록의 순서로 정해진다. 그럼 2 페이지에서 항목을 선택하게되면 겹치는 숫자가 발생하기 때문에 구별하기 어려워진다. 이전 게시글의 코드에 있던 함수들을 조금 수정해보자. 장소를 선택한 순서대로 마커 숫자 지정하기1. 개별 항목을 구분하는 i를 인덱스로 쓰지 않을 것이기 때문에 displayPlaces 함수 내에서 더이상 handleSelect..

검색 완료 후 콜백 함수로 전달되는 데이터 살펴보기키워드로 장소를 검색한 뒤 검색 결과는 콜백함수인 placesSearchCB()의 매개변수인 data에 담아진다.콘솔에 data를 찍어보면 아래처럼 결과 목록에 있는 장소 데이터들이 출력된다. (결과 목록 페이지 당 15개씩 출력된다) 장소 데이터를 하나씩 전송하기우선 항목 당 선택 버튼을 만들고, 선택한 항목들을 모아서 넘겨주기 위한 선택 완료 버튼도 미리 만들었다.항목 당 선택 버튼을 만드는 것은 아래 getListItem() 함수 코드 내부에 itemStr+= 로 선택, 취소 버튼을 innerHTML에 추가해주었다.// 검색결과 항목을 Element로 반환하는 함수입니다function getListItem(index, places) { cons..