스터디일지/PROJECT
Final Project - Random Navi - 마커 표시하기 - 출발지와 도착지 - PART 2
똥쟁이핑크
2023. 11. 1. 22:11
지도에 마커를 잘 표시 했는데 수정사항에 맞춰 다시 코드를 고치려고 한다
수정사항으로 생각했던 것 중에 이미지를 넣어서 시각적으로
출발지와 도착지를 알 수 있게 하는게 더 좋을거 같아서 먼저 시행했다.
참고로한 예시 코드는 아래 주소를 첨부했다.
https://apis.map.kakao.com/web/sample/markerWithCustomOverlay/,
https://apis.map.kakao.com/web/sample/categoryMarker/,
https://apis.map.kakao.com/web/sample/multipleMarkerImage/,
https://apis.map.kakao.com/web/sample/markerWithCustomOverlay/.
이미지는 출발과 도착에 맞게 적절한 이미지 주소를 첨부했고
// 수정 전
var positions = [
{
title: '출발',
latlng: new kakao.maps.LatLng(let_ori, lon_ori)
},
{
title: '도착',
latlng: new kakao.maps.LatLng(lat_des, lon_des)
}
]
// 수정 후
var positions = [
{
title: '출발',
latlng: new kakao.maps.LatLng(let_ori, lon_ori),
image: "https://cdn-icons-png.flaticon.com/512/6213/6213694.png"
},
{
title: '도착',
latlng: new kakao.maps.LatLng(lat_des, lon_des),
image: "https://cdn-icons-png.flaticon.com/512/4856/4856582.png"
}
]
이미지 사이즈는 똑같기 때문에 for문을 돌때 코드를 추가 했다.
// 수정 전
// 마커를 지도에 표시하기
for(var i = 0; i < positions.length; i++){
// 마커 이미지 크기
var marker = new kakao.maps.Marker({
map: map,
position: positions[i].latlng,
title: positions[i].title,
})
}
// 수정 후
// 마커를 지도에 표시하기
for(var i = 0; i < positions.length; i++){
// 마커 이미지 크기
var imageSize = new kakao.maps.Size(30, 35);
var markerImage = new kakao.maps.MarkerImage(positions[i].image, imageSize);
var marker = new kakao.maps.Marker({
map: map,
position: positions[i].latlng,
title: positions[i].title,
image: markerImage
})
}
결과는 아래와 같이 나왔는데 생각보다 이미지가 작아 보여서
이미지 크기를 수정할 예정이다.
오늘 아침에 프로젝트 회의 결과 마커도 우리가 만든 이미지로 넣으면 어떨까 하는 생각에
이미지를 만들어 넣었는데
글씨가 눈에 확 들어오지 않아서 조장이 이미지를 만들어 줬지만
결국 카카오에서 제공하는 출발과 도착 깃발 이미지를 사용했다.
이미지 크기도 조절하고 안내시작을 눌러서 마커가 잘 나오는지 확인했다.