JS

Kakao 지도 api 활용) 지도 마커 + 조절바 표시

은line 2022. 1. 1. 11:14

사전 준비 사항

  1. https://developers.kakao.com/ 사이트에서 키를 발급하고 JavaScript 키를 복사한 후
  2. https://apis.map.kakao.com/ 에 접속하여 필요한 api를 찾는다.
  3. 무료 도메인 사이트 만든 후 filezilla 다운 (dothome에서 무료)
  4. 서버관리자로 꼭 index.html 파일을 포함하여 업로드 

지도 + 마커표시

지도에 표시하고 싶은 장소의 위도,경도를 찾아 배열로 저장

(구글 지도에 접속 후 우클시 좌표 뜸)

 

사이트 접속시 위치들이 한번에 보이도록 중심좌표는 지도에서 가운데를 찾아 center에 적어 줌

지도 레벨 조절 버튼

html, css                 /                js

 

변경 전 / 후

 

튤팁

마우스를 올려 놓으면 장소명 표시

 

이렇게 여러 api를 조합하다 보면 코드 규칙성도 찾을 수 있어서

자유롭게 쓸 수 있을 것 같아요

 

filezilla에 파일 업로드시 index 파일이 없다면

오류가 발생하기 때문에

 

꼭 포함해서 업로드!

 

코드 수정 후 반영하고 싶다면 우클 후 업로드 or 파일 선택 후 엔터