// 지도 생성
let mapContainer = document.getElementById(‘map’);
let mapOptions = {
center: new kakao.maps.LatLng(126.572552077426, 33.4529029642094),
level: 1
};
let map = new kakao.maps.Map(mapContainer, mapOptions);
let positions = [
{
address:'제주 제주시 첨단로 216-19',
text: '장소 1'
},
{
address:'제주 제주시 첨단로 213-4',
text: '장소 2'
}
];
let geocoder;
let coords;
let marker;
let infowindow;
let linePath = new Array();
for (let i = 0; i < positions.length; i ++) {
geocoder = new kakao.maps.services.Geocoder();
geocoder.addressSearch(positions[i].address, function(result, status) {
if (status === kakao.maps.services.Status.OK) {
linePath.push(new daum.maps.LatLng(result[0].y, result[0].x));
coords = new kakao.maps.LatLng(result[0].y, result[0].x);
marker = new kakao.maps.Marker({
map: map,
position: coords
});
infowindow = new kakao.maps.InfoWindow({
content: '<div style="width:150px;text-align:center;padding:6px 0;">'+positions[i].text+'</div>' // 인포윈도우에 표시할 내용
});
infowindow.open(map, marker);
map.setCenter(coords);
}
});
}
// 지도에 표시할 선 생성
var polyline = new daum.maps.Polyline({
path: linePath, // 선을 구성하는 좌표배열
strokeWeight: 5, // 선의 두께
strokeColor: '#FFAE00', // 선의 색깔
strokeOpacity: 1, // 선의 불투명도(1에서 0 사이의 값이며 0에 가까울수록 투명)
strokeStyle: 'solid' // 선의 스타일
});
polyline.setMap(map);
해당 소스로 구현을 했는데요, 원하는 위치에 마커(2개) 가 정상적으로 생성되지만
두 마커끼리 이어지는 선이 구현되지 않습니다.
linePath 를 console 로 찍어보면 두 좌표 값이 정상적으로 배열에 들어가있는걸 확인했습니다.
에러 관련된 로그가 하나도 나오지 않아 어려움을 겪고 있는데, 가이드 부탁드립니다.