Final Project - Random Navi - 마커 표시하기 - 경유지 표시 - PART 3

위의 사진은 수정하기 전 사진이지만 

출발지와 도착지 마커는 표시가 되는데 

경유지를 지날때는 위의 사진에서 보는 것처럼 

어느 부분이 경유지인지 알기 어려워서 

경유지인 곳에 마커를 넣기로 했다.

 

1. 정보 확인하기

마커에는 꼭 필요한 위도, 경도 좌표가 필요함으로 data에 정보가 담겨 있는지 확인해 봐야 하는데 

navi.js 에서 function remakeRandomNavi(lat, lng) 함수에 아래와 같은 정보가 필요하다는 것을 확인했다.

console.log("주소: " + currentAddress);
console.log("경유지 y: " + waypointsY + ", 경유지 x:" + waypointsX);
console.log("목적지 y: " + destinationLatitude + ", 경유지 x:" + destinationLongitude);

 

data에는 경유지 정보가 담겨 있으므로 이 부분을 활용하기로 했다.

 

2. 좌표 가져오기

data에 담긴 정보에서 아래 코드를 응용해서 lat_way, lon_way를 가져오려 했는데 

자꾸 값이 없다고 나왔다.

var let_ori = data.routes[0].summary.origin.y;
var lon_ori = data.routes[0].summary.origin.x;

 

그래서 고민하다가 data는 json 형식으로 가져오기 때문에 log를 봤는데 Object라고만 나와서 

코드를 추가해서 값을 확인했다.

const json = JSON.stringify(data);

console.log(document.write(json));

 

위의 코드 결과는 아래와 같다.

 

눈으로 보기 어지러워서 정렬했다.

 

 

이렇게 보다보니 data에 경유지는 총 4개인데 

guides에 "type":1000이면 경유지고 4개 경유지가 위치해 있는 곳은 아래와 같다.

1. routes[0].sections[0].guides[8]
2. routes[0].sections[1].guides[0]
3. routes[0].sections[1].guides[11]
4. routes[0].sections[2].guides[0]

 

데이터가 어디에 위치해 있는지 모르고 무작정 코드를 짜니

시간도 오래 걸리고 결과도 안나왔다.... 

아래 처럼 코드를 작성하니 결과는 잘 나왔다.

// 경유지 마커 표시
    var imageWay = 'https://www.dlf.pt/dfpng/middlepng/362-3623215_green-pin-point-map-transparent-background-hd-png.png';
    var imageSize = new kakao.maps.Size(24, 35);
    // 마커 이미지를 생성합니다
    var markerImage = new kakao.maps.MarkerImage(imageWay, imageSize);

    // 경유지 마커 표시하기
    for (var i = 0; i < data.routes[0].sections.length; i++) {
        var section = data.routes[0].sections[i];
        for (var j = 0; j < section.guides.length; j++) {
            var guide = section.guides[j];
            if (guide.type === 1000) {
                var lat_way = guide.y;
                var lon_way = guide.x;

                var latlng = new kakao.maps.LatLng(lat_way, lon_way)

                var marker = new kakao.maps.Marker({
                    map: map,
                    position: latlng,
                    image: markerImage
                });
            }
        }
    }

 

 

경유지 3개 설정했는데 잘 나왔고 이미지만 다시 수정하면 될것 같다.