728x90

웹개발 4

[네이버 맵 API] 커스텀 오버레이를 지도의 요소 중 최상단에 두고 싶을때 floatPane 사용하기

위와 같이 목적지 설정 커스텀 오버레이가 출발/도착 마커 , 버스마커보다 하단을 내려가는 문제가 발생했습니다. overlay.onAdd = function() { let overlayLayer = this.getPanes().overlayLayer; overlayLayer.appendChild(this._element); }; 위의 코드를 다음과 같이 수정했더니 최상단으로 올라왔습니다. overlay.onAdd = function() { let floatPane = this.getPanes().floatPane; // floatPane 레이어를 선택 floatPane.appendChild(this._element); // 오버레이 요소를 floatPane에 추가 }; floatPane 레이어를 선택하는게..

웹개발 2024.04.23

[vue.js] 카카오맵 API 사용하여 맵 불러오기[2] - 입력한 주소에 맞는 마커 (marker)생성하기 / 다음 우편번호 API 와 콜라보

https://choi-hee-yeon.tistory.com/172 [vue.js] 무료로 daum의 우편번호 API 이용하기 (daum is undefined 오류해결하기) https://postcode.map.daum.net/guide Daum 우편번호 서비스 우편번호 검색과 도로명 주소 입력 기능을 너무 간단하게 적용할 수 있는 방법. Daum 우편번호 서비스를 이용해보세요. 어느 사이트에서나 무료로 choi-hee-yeon.tistory.com 위의 글을 통해 다음의 우편번호 API 서비스를 이용해봤습니다. https://choi-hee-yeon.tistory.com/173 [vue.js] 카카오맵 API 사용하여 맵 불러오기[1] (feat. 내 마음을 아프게 한 Uncaught TypeErro..

웹개발 2024.03.22

[vue.js] 카카오맵 API 사용하여 맵 불러오기[1] (feat. 내 마음을 아프게 한 Uncaught TypeError: kakao.maps.LatLng is not a constructor)

1. kakao Developers 에서 API KEY 받기 https://developers.kakao.com/ Kakao Developers 카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다. developers.kakao.com 이렇게 API 키를 발급 받을 수 있습니다. 저는 웹개발에 사용할 예정이므로, javascript 의 키를 사용하겠습니다. 2. kakao Developers 에서 웹 사이트 도메인 등록하기 플랫폼 카테코리를 클릭 후, 원하는 플랫폼에 맞게 등록을 해주면 됩니다. 꼭 사용할 페이지는 모두 등록해야합니다. 3. 코드 작성하기 - 맵을 표시할 HTML 을 작성해줍니다. async mount..

웹개발 2024.03.21

[vue.js] 무료로 daum의 우편번호 API 이용하기 (daum is undefined 오류해결하기)

https://postcode.map.daum.net/guide Daum 우편번호 서비스 우편번호 검색과 도로명 주소 입력 기능을 너무 간단하게 적용할 수 있는 방법. Daum 우편번호 서비스를 이용해보세요. 어느 사이트에서나 무료로 제약없이 사용 가능하답니다. postcode.map.daum.net 다른 블로그 참고하지 않아도 될만큼 Daum에서 잘 알려주고 있습니다. 일반적인 html, javascript, css 로 알려주다보니, vue.js를 사용하는 저로써는, 코드를 약간 수정할 필요가 있었습니다. 위 코드를 작성했을때, 저는 daum is undefined 오류가 떴습니다.(Eslint 오류) 이를, 아래의 코드로 해결했습니다. // eslint-disable-next-line no-undef..

웹개발 2024.03.20
728x90