폴리라인에 클릭시 그 안에 인포윈도우 값을 가져올 수 있을까요?

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

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

실시간으로 위치랑 정보를보내면 아이디값 기준으로해서 라인을 계속해서 그려주고 있는데 그 안에 정보들을 인포윈도우로 해서 보여주고싶은데요.

  polyline[`${processJsonData.id}`] = new kakao.maps.Polyline({
    path : [processJsonData.latlng], 
    strokeWeight: 2,               
    strokeColor: 'red', 
    strokeOpacity: 0.7, 
    strokeStyle: 'solid', 
    map: mapRef.current
  });

현재 이런식으로 아이디값 기준으로해서 라인을 계속해서 그리고 있는데 여기에 라인을 클릭했을 때 인포윈도우의 정보를 보여주게 하고 싶은데 클릭이벤트로는 매칭을 시킬게 없더라고요 혹시 다른방법이 있나요? 뭔가 forEach랑 맵을 생각해봤는데 인덱스 자체의 위치를 뽑아올 수도 없고… 고민하다 글 남깁니다…!

2

클로저 함수로 폴리라인 클릭 시 정보를 가져올 수 있습니다.
아래 코드 참고해주세요.

const data = [
    {
        id: '1',
        path: [
            new kakao.maps.LatLng(33.452344169439975, 126.56878163224233),
            new kakao.maps.LatLng(33.452739313807456, 126.5709308145358),
            new kakao.maps.LatLng(33.45178067090639, 126.5726886938753)
        ]
    },
    {
        id: '2',
        path: [
            new kakao.maps.LatLng(33.45029074678255,126.56683431445217),
		    new kakao.maps.LatLng(33.450367698465065, 126.573426990549),
		    new kakao.maps.LatLng(33.45094523177285,126.57357473969098)
        ]
    }
];

data.forEach(item => {
    //지도에 표시할 선을 생성합니다
    let polyline = new kakao.maps.Polyline({
        map: map, // 지도에 선을 표시합니다 
        path: item.path, // 선을 구성하는 좌표배열 입니다
        strokeWeight: 5, // 선의 두께 입니다
        strokeColor: '#FFAE00', // 선의 색깔입니다
        strokeOpacity: 0.7, // 선의 불투명도 입니다 1에서 0 사이의 값이며 0에 가까울수록 투명합니다
        strokeStyle: 'solid' // 선의 스타일입니다
    });

    (function(polyline, item) {
        kakao.maps.event.addListener(polyline, 'click', function() {
            //TODO: 구현하고자 하는 방향으로 로직을 추가해주세요.
            console.log(item);
        });
    })(polyline, item);
});
3

감사합니다. 저기까지는 비슷하게 구현했었는데 궁금한점이 이제 라인자체가 배열로 되어있는데 이때 이 라인을 클릭했을 때에 해당 배열의 몇 번째 인덱스인지도 알아올 수 있나요?

4

문의 주신 기능은 제공하고 있지 않습니다.

클릭 이벤트 핸들러에서 받은 클릭 좌표와 폴리라인의 각 좌표 정보로
새로운 폴리라인을 만들어서 polyline.getLength() API로 두 점 간의 거리를 구할 수 있습니다.
가장 가까운 거리의 path index를 찾을 수 있게 구현해주세요.

https://apis.map.kakao.com/web/documentation/#Polyline_click
https://apis.map.kakao.com/web/documentation/#Polyline_getLength

5

감사합니다 한번 해보겠습니다.

1개의 좋아요