위의 사진은 수정하기 전 사진이지만
출발지와 도착지 마커는 표시가 되는데
경유지를 지날때는 위의 사진에서 보는 것처럼
어느 부분이 경유지인지 알기 어려워서
경유지인 곳에 마커를 넣기로 했다.
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개 설정했는데 잘 나왔고 이미지만 다시 수정하면 될것 같다.
'스터디일지 > PROJECT' 카테고리의 다른 글
Final Project - Random Navi - 트러블슈팅 - Jmeter (0) | 2023.11.08 |
---|---|
Final Project - Random Navi - 마커 표시하기 - 최근 목적지 - PART 4 (0) | 2023.11.05 |
Final Project - Random Navi - 마커 표시하기 - 출발지와 도착지 - PART 2 (0) | 2023.11.01 |
Final Project - Random Navi - 마커 표시하기 - 출발지와 도착지 - PART 1 (0) | 2023.10.31 |
Final Project - Random Navi - 버튼 수정 하기 (0) | 2023.10.31 |