안녕하세요. 지도에서 폴리라인 클릭 시 인식이 안 되는 문제에 대해서 질문드립니다.
저희가 다른 공공데이터api를 이용하기 때문에 그리려는 좌표가 많아서
아래와 같이 for문 아래에 폴리라인을 그리는 함수와 event 함수를 같이 넣는 방식으로 구현했습니다.
그런데 웹 브라우저에서는 클릭하면 해당 폴리라인 조각이 인식되는데, 앱으로 웹페이지를 띄우는 식으로 구현하면 폴리라인이 클릭이 안 되거나
웹 브라우저에서도 새로고침을 몇번 하면 폴리라인이 클릭이 안 되는 등의 문제가 발생했습니다.
for문 밖에 있는 다른 이벤트 함수들은 항상 잘 동작하는 상황입니다.
또 폴리라인이 그려지는 것까지는 잘 동작합니다.
도움 주실 수 있을까요? 아래는 해당 자바스크립트 코드입니다.
for (let k = 0; k < myPlaceSize; k++) {
// 각 데이터 요소에 대한 id
let dataElementId = "myPlaceData" + k;
// 데이터 요소에서 데이터 가져오기
let myPlaceData = document.getElementById(dataElementId).getAttribute("data-value");
// 데이터 파싱
const obj = JSON.parse(myPlaceData);
//console.log(obj);
var lnkNam = obj.lnk_nam;
// 문자열을 배열로 변환
var arr = obj.coordinates.split("],[");
// 각 배열 요소를 좌표 배열로 변환하여 숫자 값으로 넣기
var coordinates = arr.map(function (item) {
var parts = item.replace("[", "").replace("]", "").split(",");
return [parseFloat(parts[0]), parseFloat(parts[1])];
});
let paths = [];
for (let j = 0; j < coordinates.length; j++) {
paths.push(new kakao.maps.LatLng(coordinates[j][0], coordinates[j][1]));
}
var polyline;
if (visitedTrailList.includes(lnkNam)) {
polyline = new kakao.maps.Polyline({
path: paths,
strokeWeight: 10,
strokeColor: '#79DF00',
strokeOpacity: 0.8,
strokeStyle: 'solid'
});
} else {
polyline = new kakao.maps.Polyline({
path: paths,
strokeWeight: 10,
strokeColor: '#424141',
strokeOpacity: 0.5,
strokeStyle: 'solid'
});
}
polyline.setMap(map);
kakao.maps.event.addListener(polyline, 'click', function (mouseEvent) {
var latlng = mouseEvent.latLng;
console.log(latlng.toString());
console.log(obj);
nowTrail = obj;
nowTrailLat = latlng.getLat();
nowTrailLng = latlng.getLng();
console.log(nowTrail);
// coordinates 값을 제거
const {coordinates, myPlaceId, ...newData} = nowTrail;
console.log(JSON.stringify(newData, null, 2));
visitTrail(newData, paths);
});
}