[TIL #61] 최종프로젝트 #10 카카오맵 마커, 선분 생성

오늘은 마커생성과 마커가 2개 이상 존재할때 마커와 마커를 잇는 선분이 생기는 기능을 구현했습니다.

var mapContainer = document.getElementById('map'), // 지도를 표시할 div  
    mapOption = {
        center: new kakao.maps.LatLng(37.498000, 127.037974), // 지도의 중심좌표
        level: 8 // 지도의 확대 레벨
    };

var map = new kakao.maps.Map(mapContainer, mapOption); // 지도를 생성합니다

// 마커 이미지 주소
var imageSrc = "https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/markerStar.png";

var markers = [];   // 마커를 담을 배열
var lines = [];     // 선분을 담을 배열 

// 마커, 선분 생성
export function createMarker(positions) {

    // 기존 마커 모두 제거
    // 관광지 삭제했을 때 마커를 재생성시키기 위해 추가
    for (const marker of markers) {
        marker.setMap(null); // 지도에 있는 마커 제거
    }

    // 기존 선분 모두 제거
    // 관광지를 삭제했을 때 선분을 재생성시키기 위해 추가
    for (const line of lines) {
        line.setMap(null);
    }

    markers = []; // 마커 배열 초기화
    lines = []; // 선분 배열 초기화

    // 인자로 받은 positions는 관광지 목록
    for (const position of positions) {
        var markerPosition = new kakao.maps.LatLng(position.mapy, position.mapx); // 관광지의 좌표

        // 마커 생성
        var marker = new kakao.maps.Marker({
            position: markerPosition,
            image: new kakao.maps.MarkerImage(imageSrc, new kakao.maps.Size(24, 35)) // 마커 이미지 설정
        });

        marker.setMap(map); // 마커를 지도에 표시
        markers.push(marker); // 마커 배열에 추가

        // 선분 생성
        if (markers.length > 1) {   // 마커가 2개 이상이라면
            var linePath = [markers[markers.length - 2].getPosition(), markerPosition];// 첫번째 마커와 두번째 마커

            // 선분 생성, 생김새
            var line = new kakao.maps.Polyline({
                path: linePath,
                strokeWeight: 2,
                strokeColor: '#FF0000',
                strokeOpacity: 0.7,
                strokeStyle: 'solid'
            });

            line.setMap(map);
            lines.push(line);
        }

        map.setCenter(markerPosition); // 해당 위치로 지도 이동
    }
}

1
가장 상단에 있는 코드들은 페이지에 진입했을 때 맵을 생성하고 마커이미지 주소와 값을 담을 배열 등으로 이루어져 있습니다.

var mapContainer = document.getElementById('map'), // 지도를 표시할 div  
    mapOption = {
        center: new kakao.maps.LatLng(37.498000, 127.037974), // 지도의 중심좌표
        level: 8 // 지도의 확대 레벨
    };
var map = new kakao.maps.Map(mapContainer, mapOption); // 지도를 생성합니다
// 마커 이미지 주소
var imageSrc = "https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/markerStar.png";
var markers = [];   // 마커를 담을 배열
var lines = [];     // 선분을 담을 배열 

2
다음은 createMarker함수로 export를 사용해 다른 js파일에서 실행시키고 있습니다. 인자로 받고있는 positions 제가 전에 작성했던 목적지 검색 기능으로 사용자가 선택한 목적지의 정보를 담고 있는 배열입니다.

// 마커, 선분 생성
export function createMarker(positions) {
    // 기존 마커 모두 제거
    // 관광지 삭제했을 때 마커를 재생성시키기 위해 추가
    for (const marker of markers) {
        marker.setMap(null); // 지도에 있는 마커 제거
    }
    // 기존 선분 모두 제거
    // 관광지를 삭제했을 때 선분을 재생성시키기 위해 추가
    for (const line of lines) {
        line.setMap(null);
    }
    markers = []; // 마커 배열 초기화
    lines = []; // 선분 배열 초기화

함수 초입에 마커와 선분을 제거해주는데 이걸 제거해주지 않으면 사용자가 목적지를 취소했을때 해당 목적지의 마커와 선분이 남아있게 됩니다.

지도에 있는 마커와 선분이 모두 제거 되면, markers배열과 lines배열을 초기화 해줍니다.

3
positions배열에서 목적지를 하나씩 가져오는 for문입니다.

for (const position of positions) {
    var markerPosition = new kakao.maps.LatLng(position.mapy, position.mapx); // 관광지의 좌표
    // 마커 생성
    var marker = new kakao.maps.Marker({
        position: markerPosition,
        image: new kakao.maps.MarkerImage(imageSrc, new kakao.maps.Size(24, 35)) // 마커 이미지 설정
        });
    marker.setMap(map); // 마커를 지도에 표시
    markers.push(marker); // 마커 배열에 추가

markerPosition은 마커의 위치로, 목적지의 x좌표와 y좌표를 가져와 지정해줍니다.
marker는 카카오맵api에서 제공해주는 Marker함수를 이용해 마커가 있을 위치와 마커 이미지, 이미지 설정 등을 추가해 지정해주고
마커를 지도해 표시해준 뒤 마커를 markers배열에 추가해줍니다.

4
다음은 선분을 그려주는 구문입니다.

if (markers.length > 1) {   // 마커가 2개 이상이라면
    var linePath = [markers[markers.length - 2].getPosition(), markerPosition];// 첫번째 마커와 두번째 마커
    // 선분 생성, 생김새
    var line = new kakao.maps.Polyline({
        path: linePath,
        strokeWeight: 2,
        strokeColor: '#FF0000',
        strokeOpacity: 0.7,
        strokeStyle: 'solid'
    });
    line.setMap(map);
    lines.push(line);
}
map.setCenter(markerPosition); // 해당 위치로 지도 이동

선을 잇기위해선 최소 두 개의 점이 필요하기에 마커가 두 개 존재하는 것을 조건으로 만들었습니다. 마커가 2개 이상이라면 현재마커와 그 전 마커 사이에 선분을 잇는 주소를 찍어줍니다.
선분의 위도와 경도를 linePath라는 변수에 저장시켰습니다.

선분은 카카오에서 제공하는 Polyline이라는 함수를 사용해 마커와 마커사이의 경로를 설정해주고 기타 선분의 설정을 적어준다음, 해당 선분을 맵에 표시하고 현재 마커의 지점으로 지도를 이동시킵니다.

카메라를 이동하는 이유는 지금 설명하느라 굉장히 길어보이지만 사용자의 관점에서는 클릭을 했거나 목적지를 선택했기 때문에 지도가 이동하는 것이 자연스럽습니다.

클릭하거나 목적지 선택 -> 해당 장소에 마커 표시 -> 마커가 2개이상이면 선분 긋기 -> 지도 이동