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

지도에 마커를 잘 표시 했는데 수정사항에 맞춰 다시 코드를 고치려고 한다

수정사항으로 생각했던 것 중에 이미지를 넣어서 시각적으로

출발지와 도착지를 알 수 있게 하는게 더 좋을거 같아서 먼저 시행했다.

 

참고로한 예시 코드는 아래 주소를 첨부했다.

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

    })
}

결과는 아래와 같이 나왔는데 생각보다 이미지가 작아 보여서 

이미지 크기를 수정할 예정이다.

 

 

오늘 아침에 프로젝트 회의 결과 마커도 우리가 만든 이미지로 넣으면 어떨까 하는 생각에 
이미지를 만들어 넣었는데 

 

글씨가 눈에 확 들어오지 않아서 조장이 이미지를 만들어 줬지만

결국 카카오에서 제공하는 출발과 도착 깃발 이미지를 사용했다.

이미지 크기도 조절하고 안내시작을 눌러서 마커가 잘 나오는지 확인했다.