[JS] Kakao Map - 에이블런 프론트엔드부트캠프 18일차

1. 맵 출력

HTML에 지도 영역을 div#map 으로 작성해주고 JS에서 카카오 공식문서를 따라 작성한다.

https://apis.map.kakao.com/web/

    <!-- 지도영역 -->
   <div id="map"></div>

var container = document.getElementById('map'); //지도를 담을 영역의 DOM 레퍼런스
var options = { //지도를 생성할 때 필요한 기본 옵션
	center: new kakao.maps.LatLng(37.58506980062978, 126.88550246441767), //지도의 중심좌표.
	level: 3 //지도의 레벨(확대, 축소 정도)
};

var map = new kakao.maps.Map(container, options); //지도 생성 및 객체 리턴

 

2. 교통정보 표시

맵에 교통정보를 표시하고 버튼을 누르면 표시하지 않게 되는 기능을 만들었다. 

//교통정보보기버튼 변수로 저장 
const t_on = document.querySelectorAll(".traffic li")[0]; 
//교통정보 끄기 버튼 변수로 저장 
const t_off = document.querySelectorAll(".traffic li")[1];

 

JS에서 HTML 요소를 가져와 변수로 저장한다.

//교통정보 보기 버튼 클릭시 
t_on.addEventListener("click", (e)=>{
  e.preventDefault(); 

  if(t_on.classList.contains("on")) return; 
  map.addOverlayMapTypeId(kakao.maps.MapTypeId.TRAFFIC); 

  t_on.classList.add("on"); 
  t_off.classList.remove("on");   
}); 

//교통정보 끄기 버튼 클릭시 
t_off.addEventListener("click",e=>{
  e.preventDefault(); 
  //이미 t_off에 on이 있다면 아래 코드를 실행하지 않고 코드 종료
  if(t_off.classList.contains("on")) return; 
  map.removeOverlayMapTypeId(kakao.maps.MapTypeId.TRAFFIC); 
  t_on.classList.remove("on"); 
  t_off.classList.add("on"); 
});

 

변수에 이벤트리스너를 등록 후 클릭을 하면 표시 / 미표시 설정을 하고 on 클래스를 수정한다.

 

3. 마커 표시

원하는 위치에 마커를 표시하고 마커 이미지를 입혀보았다.

var imageSrc = 'img/marker1.png', // 마커이미지의 주소입니다    
    imageSize = new kakao.maps.Size(116, 50), // 마커이미지의 크기입니다
    imageOption = {offset: new kakao.maps.Point(58, 50)}; // 마커이미지의 옵션입니다. 마커의 좌표와 일치시킬 이미지 안에서의 좌표를 설정합니다.
      
// 마커의 이미지정보를 가지고 있는 마커이미지를 생성합니다
var markerImage = new kakao.maps.MarkerImage(imageSrc, imageSize, imageOption),
    markerPosition = new kakao.maps.LatLng(37.58506980062978, 126.88550246441767);
 

var marker = new kakao.maps.Marker({
  position: markerPosition, 
  image: markerImage // 마커이미지 설정 
});

// 마커가 지도 위에 표시되도록 설정합니다
marker.setMap(map);

 

공식문서에서 알려주는 것처럼 이미지 루트를 설정하고 크기, 옵션을 지정 후 마커를 표시한다.

마커 이미지를 여러 개 표시하고 버튼을 클릭 시 해당 마커로 맵을 이동시킬 수 있도록 개발해보았다.

//브랜치 버튼 변수저장 
const branch_btns = document.querySelectorAll(".branch li");
let markerOptions =[
  { 
    title: "본점",
    latlng : new kakao.maps.LatLng(37.58506980062978, 126.88550246441767), 
    imgSrc : 'img/marker1.png', 
    imgSize : new kakao.maps.Size(116, 50),
    imgPos : {offset: new kakao.maps.Point(58, 50)}, 
    button: branch_btns[0]

  },
  { 
    title: "지점1",
    latlng : new kakao.maps.LatLng(37.5162016, 127.0759248), 
    imgSrc : 'img/marker2.png', 
    imgSize : new kakao.maps.Size(116, 50),
    imgPos : {offset: new kakao.maps.Point(58, 50)}, 
     button: branch_btns[1]

  },
  { 
    title: "지점2",
    latlng : new kakao.maps.LatLng(37.5116828, 127.059151), 
    imgSrc : 'img/marker3.png', 
    imgSize : new kakao.maps.Size(116, 50),
    imgPos : {offset: new kakao.maps.Point(58, 50)}, 
    button:branch_btns[2]
  }

];

 

변수 설정 및 기본 마커 위치 지정을 해주었다.

//반복을 돌면서 마커이미지를 정해진 위치로 배치 
for(let i=0; i<markerOptions.length; i++){
  let marker = new kakao.maps.Marker({
    map:map, 
    position:markerOptions[i].latlng, 
    title:markerOptions[i].title, 
    image: new kakao.maps.MarkerImage(markerOptions[i].imgSrc, markerOptions[i].imgSize, markerOptions[i].imgPos)
});

 

마커 이미지를 지정한 위치로 이동시켰다.

  //각 브랜치 버튼을 클릭했을때 
  markerOptions[i].button.addEventListener("click", e=>{
    e.preventDefault(); 
    //브랜치 버튼 활성화 
    for(let k=0; k<markerOptions.length; k++){
      markerOptions[k].button.classList.remove("on"); 
    }
    markerOptions[i].button.classList.add("on"); 
    //클릭한 브랜치위치로 이동 
    map.panTo(markerOptions[i].latlng);
  })
}

 

마커에 해당하는 버튼을 누르면 해당 마커의 위치로 맵을 이동시킨다.

//브라우저너비사이즈를 변경할때 
//마커가 항상 화면 가운데 위치하도록 
window.addEventListener("resize",()=>{
  //branch li에서 on이 붙은 li를 찾는다 
  let active_btn = document.querySelector(".branch li.on"); 
  //on이 붙은 li의 data-index을 찾는다 
  let active_index = active_btn.getAttribute("data-index"); 
  //배열중에서 data-index번째의 위치로 항상 가운데 유지 
  map.setCenter(markerOptions[active_index].latlng)
});

 

브라우저 사이즈를 변경하면 마커의 위치가 달라질 수 있으므로 브라우저 사이즈를 변경할 때마다 위치를 재설정해준다.