웹 기준입니다.
지도에 마크를 여러개 표시하는 내용이며, 마크의 주소를 좌표값이 아닌 주소값으로 변환하려고 합니다.
[소스 일부]
var mapContainer = document.getElementById(‘map’), // 지도를 표시할 div
mapOption = {
center: new daum.maps.LatLng(33.450701, 126.570667), // 지도의 중심좌표
level: 8 // 지도의 확대 레벨
};
var map = new daum.maps.Map(mapContainer, mapOption); // 지도를 생성합니다
var addrStr = “실제주소가 | 기준으로 구분됩니다”;
var titStr = “제목이 | 기준으로 구분 됩니다.”;
var addrCnt = addrStr.split("|");
var titCnt = titStr.split("|");
// 지도를 생성합니다
var map = new daum.maps.Map(mapContainer, mapOption);
// 주소-좌표 변환 객체를 생성합니다
function mapLatLng(A){
var geocoder = new daum.maps.services.Geocoder();
var callback = function(result, status) {
if (status === daum.maps.services.Status.OK) {
var LatArr = result[0].y.toString()+"|"+result[0].x.toString();
//result[0].y;
//alert(LatArr.toString());
return LatArr.toString();
}
};
geocoder.addressSearch(A, callback);
}
for(var i=0;i<titCnt.length;i++){
//alert(addrCnt[i]);
var latVal = mapLatLng(addrCnt[i]).split("|");
if(i==0){
var conVal = “{”;
conVal += “content: '
”+titCnt[i]+"
’, “;
conVal += “latlng: new daum.maps.LatLng(”+latVal[0]+”,"+latVal[1]+")";
conVal += “}”;
}else{
conVal = “,{”;
conVal += “content: '
”+titCnt[i]+"
’, “;
conVal += “latlng: new daum.maps.LatLng(”+latVal[0]+”,"+latVal[1]+")";
conVal += “}”;
}
alert(conVal);
}
실행하면
var latVal = mapLatLng(addrCnt[i]).split("|");
여기서 " TypeError: Cannot read property ‘split’ of undefined" Error 가 나옵니다.
함수(mapLatLng) 에서 alert를 시키면 정상적으로 출력이 됩니다.
어느 부분이 문제 인가요?
코드는 실행해 보지 않았지만…
의도하신걸 추측해보고 답변달자면
말 그대로 콜백 함수는 특정 동작 이후에 호출되는 함수입니다.
비동기로 동작하며 보통은 콜백 프로시져 보다 메인 프로시져에 있는 코드가 먼저 수행되고 나서 나중에 호출 됩니다. 보통 코드 라인이 작성한 순서대로 싱크되어 동작하지 않습니다.
여기에 함정이 하나 있고요.
두 번째 함정은,
mapLatLng 함수 내부에서 선언된 return 키워드는 mapLatLng의 것이 아닙니다.
익명함수로 선언된 callback에 할당된 함수의 리턴입니다.
때문에 latVal은 mapLatLng의 리턴이 없으므로 undefined가 할당될 것이고
undefined에 split을 호출하려다보니 오류가 나는 상태입니다.
그렇다고 mapLatLng에 리턴을 넣어도 문제가 됩니다.
callback이라는 함수는 아직 호출이 되지 않은 상태이기 때문에(첫 번째 함정) 결과 값은 아직 받지 못한 상태입니다.
결국 콜백이 호출된 이후 혹은 콜백 함수 내부에서 로직이 시작되어야 합니다.
여러가지 방법이 있긴 하지만 간단하게 수정해 보자면…
for문에 작성하신 반복문 로직을 콜백 안쪽으로 넣어주시면 됩니다.
for 문 안으로 넣어서 수정했는데요, 다른 문제가 생겼습니다.
[소스]
for(var lp=0;lp<titCnt.length;lp++){
geocoder.addressSearch(addrCnt[lp], function(result, status) {
// 정상적으로 검색이 완료됐으면
if (status === daum.maps.services.Status.OK) {
var coords = new daum.maps.LatLng(result[0].y, result[0].x);
coords = coords.toString().replace("(","");
coords = coords.toString().replace(")","");
var coordsArr = coords.split(",");
//alert(mapLatLngY(addrCnt[i]));
if(i==0){
var conVal = "{";
//conVal += "content: '<div>"+titCnt[lp]+"</div>', ";
conVal += "latlng: new daum.maps.LatLng("+coordsArr[0]+","+coordsArr[1]+")";
conVal += "}";
}else{
conVal = ",{";
//conVal += "content: '<div>"+titCnt[lp]+"</div>', ";
conVal += "latlng: new daum.maps.LatLng("+coordsArr[0]+","+coordsArr[1]+")";
conVal += "}";
}
}
});
}
정상적으로 좌표값이 들어가는것은 확인됐는데요,
실행하면 크롬콘솔에서
sdk.js?appkey=2a1b712fa90b3e029d0cb02a4c809bbc&libraries=services:1 A Parser-blocking, cross site (i.e. different eTLD+1) script, http://s1.daumcdn.net/svc/attach/U03/cssjs/mapapi/4.0.2-fixed/1503560665167/kakao.js, is invoked via document.write. The network request for this script MAY be blocked by the browser in this or a future page load due to poor network connectivity. If blocked in this page load, it will be confirmed in a subsequent console message.See https://www.chromestatus.com/feature/5718547946799104 for more details.
이렇게 나옵니다.
1개의 좋아요
기존 내용에서 소스 변경으로 지도에 마크 찍는거는 처리됐는데요,
마크위에 마우스오버 이벤트에 오버레이는 샘플문서에서 방법을 못 찾겠습니다.
샘플이나, 참고자료가 있으면 좀 알려주세요~~
for(var lp=0;lp<titCnt.length;lp++){
geocoder.addressSearch(addrCnt[lp], function(result, status) {
// 정상적으로 검색이 완료됐으면
if (status === daum.maps.services.Status.OK) {
var coords = new daum.maps.LatLng(result[0].y, result[0].x);
var iwContent = '<div style="padding:5px;">'+titCnt[lp]+'</div>';
// 결과값으로 받은 위치를 마커로 표시합니다
var marker = new daum.maps.Marker({
map: map,
position: coords,
title : titCnt[lp]
});
var infowindow = new daum.maps.InfoWindow({
content : iwContent
});
daum.maps.event.addListener(marker, 'mouseover', function() {
// 마커에 마우스오버 이벤트가 발생하면 인포윈도우를 마커위에 표시합니다
infowindow.open(map, marker);
});
// 마커에 마우스아웃 이벤트를 등록합니다
daum.maps.event.addListener(marker, 'mouseout', function() {
// 마커에 마우스아웃 이벤트가 발생하면 인포윈도우를 제거합니다
infowindow.close();
});
map.setCenter(coords);
}
});
}
