for (var i = 0; i < listData.length ; i++) {
geocoder.addressSearch(listData[i].groupAddress, function(result, status)
이렇게 여러개의 주소를 가져와서 마커를 찍고 있는데 result의 x,y 좌표가 listData의 순서에 상관없이 계속 값의 순서가 바뀌는데 해결할 방법 없을까요??
안녕하세요,
result의 x, y 좌표가 listData 의 순서와 상관없이 값의 순서가 바뀐다는 것을 좀 더 자세히 설명해주실 수 있을까요?
가령 샘플코드를 이용해서,
아래과 같이 2개의 주소로 테스트 해보면 정상적으로 각 주소에 맞는 x, y 좌표를 보실 수 있습니다.
<div id="map" style="width:100%;height:350px;"></div>
<script>
var mapContainer = document.getElementById('map'), // 지도를 표시할 div
mapOption = {
center: new daum.maps.LatLng(33.450701, 126.570667), // 지도의 중심좌표
level: 3 // 지도의 확대 레벨
};
// 지도를 생성합니다
var map = new daum.maps.Map(mapContainer, mapOption);
// 주소-좌표 변환 객체를 생성합니다
var geocoder = new daum.maps.services.Geocoder();
var listData = [
{
groupAddress: '제주특별자치도 제주시 첨단로 242',
},
{
groupAddress: '제주특별자치도 제주시 첨단로 241',
}
];
for (var i=0; i < listData.length ; i++) {
// 주소로 좌표를 검색합니다
geocoder.addressSearch(listData[i].groupAddress, function(result, status) {
// 정상적으로 검색이 완료됐으면
if (status === daum.maps.services.Status.OK) {
var coords = new daum.maps.LatLng(result[0].y, result[0].x);
// 결과값으로 받은 위치를 마커로 표시합니다
var marker = new daum.maps.Marker({
map: map,
position: coords
});
// 인포윈도우로 장소에 대한 설명을 표시합니다
var infowindow = new daum.maps.InfoWindow({
content: result[0].y + "," + result[0].x
});
infowindow.open(map, marker);
// 지도의 중심을 결과값으로 받은 위치로 이동시킵니다
map.setCenter(coords);
}
})
};
</script>for문 말고
Array.forEach, 혹은 IIFE를 사용하셔서 스코프를 강제하셔야 할 겁니다.
ES6의 const, let을 사용하시면 더 편할테지만 프로젝트 전체를 손봐야 할테니… 그건 더 힘들거고요.
아래 답변을 참고해주세요.
https://devtalk.kakao.com/t/topic/54337/2?u=doji.doo
지금 샘플데이터 주소로
서울특별시 광진구
서울특별시 광진구
서울특별시 강남구
지역무관
지역무관
지역무관
대구
대구
대구
대구
대구
대구
대구
부산
부산
부산
부산
제주도
목포
목포
목포
전주
전주
전주
서울특별시
대구
대구
대구
대구
대구
대구
대구
대구
대구
대구
대구
대구
대구
대구
대구
대구
서울특별시
대구
대구
대구
서울특별시
서울특별시
부산
부산
부산
부산
부산
부산
부산
서울
서울특별시
이렇게 들어가 있어서 주소로 좌표 검색할 때 listData는 값을 넣는 순서대로 잘 나오는데 x,y 좌표는 값을 넣은 순서가 아니라 계속 무작위로 바껴 나와서요ㅜㅜ 마커만 찍을 때는 상관이 없는데 인포윈도우를 띄우려니 마커에 맞춰 인포윈도우를 띄울 수가 없네요…
listData 샘플 데이터 순서
result[0]의 순서인데 계속 바뀝니다
코드 전문을 볼 수 없으니 제가 정확하게 답변드릴 수는 없지만,
순서가 바뀌는건 검색 요청 시점과 응답 시점이 다른 비동기 로직이라서 그렇습니다.
응답이 먼저 오는 요청의 콜백이 먼저 실행되기 때문에 말씀하신대로 매 번 다르게 출력됩니다.
위에 제가 말씀드린 것처럼 forEach로 바꾸시면
각 콜백에서 index 값을 스코프에 고정된 상태로 들고 있을 것이고
그 문맥에서 이벤트를 걸면 Marker - Infowindow의 1:1 매핑에는 문제가 없을 것 같습니다.
한 번 해보세요.
forEach로 해도 안되네요…
흐음… 잘 되는데요…
var mapContainer = document.getElementById('map');
var mapOption = {
center: new daum.maps.LatLng(37.450701, 126.570667),
level: 14
};
var map = new daum.maps.Map(mapContainer, mapOption);
var geocoder = new daum.maps.services.Geocoder();
var listData = [
'제주특별자치도 제주시 첨단로 242',
'제주특별자치도 제주시 첨단로 241',
'서울특별시 송파구 오금로13길 8',
'서울특별시 송파구 올림픽로 25',
'서울특별시 광진구 동일로18길 80',
'서울특별시 종로구 지봉로 25',
'서울특별시 성북구 인촌로 73',
'강원도 춘천시 춘천로310번길 26',
'강원 강릉시 운산동 1081',
'충북 단양군 단양읍 천동리 산 9-1',
'세종특별자치시 금남면 장재리 산 31',
'경북 청도군 화양읍 고평리 산 79-2',
'전라남도 나주시 노안면 학산용산길 104-1'
];
listData.forEach(function(addr, index) {
geocoder.addressSearch(addr, function(result, status) {
if (status === daum.maps.services.Status.OK) {
var coords = new daum.maps.LatLng(result[0].y, result[0].x);
var marker = new daum.maps.Marker({
map: map,
position: coords
});
var infowindow = new daum.maps.InfoWindow({
content: '<div style="width:150px;text-align:center;padding:6px 0;">' + listData[index] + '</div>',
disableAutoPan: true
});
infowindow.open(map, marker);
}
});
});
4개의 좋아요
제가 값을 잘못 넣었네요
listData.forEach(function(addr, i) {
geocoder.addressSearch(addr.groupAddress, function(result, status) {
해결했습니다 감사합니다!!
1개의 좋아요