초보입니다 ! 경로상에서 저희가 추가한 좌표값이 맞으면

카카오맵 API (지도/로컬)
1

[FAQ] 지도/로컬 API 문의 전 꼭 읽어 주세요.
https://devtalk.kakao.com/t/faq-api/125610

api 초보입니다 ㅠ
저희가 구현하고 싶은건 출발지와 목적지가 정해진 상태에서 그 경로 상의 좌표값 중 저희가 구한 데이터 좌표값이 있으면 마커표시를 하고 싶은데 어떤 부분을 보면 될까요?

2

경로 내 좌표 포함 여부는 별도로 알고리즘을 구해서 적용해주셔야 합니다.
아래 코드는 직교좌표계의 좌표로 계산하는 코드이며 원본 알고리즘을 활용하였습니다.
해당 코드의 사용은 자유이며, 사용함으로써 발생하는 문제는 책임지지 않습니다.
참고로만 봐주시고 다양한 알고리즘도 있으니 로직에 맞는 알고리즘을 적용해주세요.

var linePath = [
    new kakao.maps.LatLng(33.45066659223143, 126.5660257885682),
    new kakao.maps.LatLng(33.451626783521135, 126.56731167218297),
    new kakao.maps.LatLng(33.450627973681826, 126.5678759144994),
    new kakao.maps.LatLng(33.44960264578221, 126.56600957698367),
    new kakao.maps.LatLng(33.4500249222858, 126.56558801499563),
    new kakao.maps.LatLng(33.451069329033764, 126.56517409961053),
    new kakao.maps.LatLng(33.451659126692874, 126.56624671161687),
    new kakao.maps.LatLng(33.4521174632551, 126.56840630784194),
    new kakao.maps.LatLng(33.45042446461146, 126.56898473034465),
    new kakao.maps.LatLng(33.449575178136946, 126.56847267703799),
    new kakao.maps.LatLng(33.44945268515, 126.56695678873984),
    new kakao.maps.LatLng(33.450331611819955, 126.5682108014187),
    new kakao.maps.LatLng(33.45146315667105, 126.56951736877203),
    new kakao.maps.LatLng(33.45079121782814, 126.57074680986175),
    new kakao.maps.LatLng(33.44982741381876, 126.57100968587731),
    new kakao.maps.LatLng(33.44956948979531, 126.56942992675575),
    new kakao.maps.LatLng(33.449975054186034, 126.56938490129168),
    new kakao.maps.LatLng(33.45049864630828, 126.56957591111662),
    new kakao.maps.LatLng(33.450625614870276, 126.56979039248591),
    new kakao.maps.LatLng(33.45053650074076, 126.57009198419082)
];

//폴리라인 생성
var polyline = new kakao.maps.Polyline({
    map: map,
    path: linePath,
    strokeWeight: 5,
    strokeColor: '#FFAE00',
    strokeOpacity: 0.7,
    strokeStyle: 'solid'
});

//마커 좌표
var positions = [
    new kakao.maps.LatLng(33.44956948979531, 126.56942992675575),
    new kakao.maps.LatLng(33.450701, 126.570667),
    new kakao.maps.LatLng(33.452739313807456, 126.5709308145358),
    new kakao.maps.LatLng(33.45133510810506, 126.57159381623066)
];

var markers = [];
displayMarkers(positions);

//marker 생성
function displayMarkers(positions) {
    positions.forEach(latlng => {
        var marker = new kakao.maps.Marker({
            map: map,
            position: latlng
        });

        markers.push(marker);
    });
}

//https://github.com/veltman/point-on-line 참고
function colinear(a,b,c) {
  return (b[0] - a[0]) * (c[1] - a[1]) === (c[0] - a[0]) * (b[1] - a[1]);
}

function between(a, b, c) {
    return (a <= b && b <= c) || (c <= b && b <= a);
}

function pointOnLine(point, vs) {
    var pointx = point[0];
    var pointy = point[1];

    var interect = false

    for (var i = 0, j = vs.length - 1; i < vs.length; j = i++) {
        var pathi = vs[i]; //b
        var pathj = vs[j]; //a

        if(colinear(pathj, pathi, point)) {
            const checkX = pathi[0] !== pathj[0] && !between(pathj[0], point[0], pathi[0]);
            const checkY = between(pathj[1], point[1], pathi[1]);
            if(!checkX && checkY) interect = checkY;
        }
    }

    return interect;
}

var pathArr = linePath.map((latlng) => {
    const coords = latlng.toCoords();
    return [coords.getX(), coords.getY()];
})

var markersInLine = markers.filter(function(marker) {
   var mPos = marker.getPosition().toCoords();
   return pointOnLine([mPos.getX(), mPos.getY()], pathArr);
});

console.log(markersInLine);