Final Project - Random Navi - 마커 표시하기 - 출발지와 도착지 - PART 1

 

 

경로 안내 화면에서 위의 사진처럼 경로를 잘 안내해 주지만 어느 곳에서 출발하고 도착하는지 
길 찾기 버튼을 누른 사람만 알 수 있었다

 

그래서 https://apis.map.kakao.com/web/sample/multipleMarkerImage/에 예제로 나와있는 코드와 프로젝트에서 구현된 코드를 사용하여 출발지와 도착지 마커를 표시하려고 한다.

 

navi.js의 function makeLiveMap은 응답받은 객체를 가공해서 위의 사진처럼 경로안내를 해주는 함수를 이용하려고 한다.

위의 함수는 data라는 parameter를 입력 받는데 data에는 출발지와 목적지의 데이터가 담겨있다.

function makeLiveMap(data) {
    waypointCount = 0;
    clearPolylines(); // 기존의 선들을 모두 제거
    if (!map) {
        map = new kakao.maps.Map(document.getElementById('map'), {
            level: 3
        });
    }

					.........

                polyline.setMap(map);

                polylines.push(polyline); // 선을 배열에 추가
            }
        }
    }

    map.setBounds(bounds); // 새로 계산된 경계를 지도에 적용합니다.
}

 

위의 함수와 카카오에서 제공하는 api 사용해서 마커를 표시하려면 위도와 경도의 좌표가 필요하다.

 

그래서 calculation.js에 있는 현재위치에서 거리 계산을 해주는 함수 안에 좌표 정보를 받아 올 수 있는 코드를 가져왔다.

function calculateCurrectToPoint(data){

// 코드 일부분 첨부
// 출발지 도착지 마커 표시하기 위한 위도와 경도 
    var let_ori = data.routes[0].summary.origin.y;
    var lon_ori = data.routes[0].summary.origin.x;
    var lat_des = data.routes[0].summary.destination.y;
    var lon_des = data.routes[0].summary.destination.x;
}

 

위의 코드를 이용해서 makeLiveMap함수 안에 표시하고자 하는 마커의 이름과 좌표를 기입했다.

var positions = [
        {
            title: '출발',
            latlng: new kakao.maps.LatLng(let_ori, lon_ori)
        },
        {
            title: '도착',
            latlng: new kakao.maps.LatLng(lat_des, lon_des)
        }
    ]

 

그리고 마커를 표시하기 위해 지도에 보내주면 된다.

// 마커를 지도에 표시하기
    for(var i = 0; i < positions.length; i++){
        var marker = new kakao.maps.Marker({
            map: map,
            position: positions[i].latlng,
            title: positions[i].title
        })
    }

그러면 아래와 같은 결과가 나오는데 수정해야 할 것들이 있다.

수정해야 할 것들

1. 출발과 도착은 마커에 마우스를 갔다 대야 위의 사진처럼 나온다

2. 마커의 이미지가 같아서 이미지를 바꿔서 출발지와 도착지를 시각적으로 확인할 수 있게 하는 것이 좋을 듯하다.