services.Places 라이브러리 사용중 keywordSearch 메소드에 문제가 있습니다

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

개발환경 : C#

키워드 검색을 이용하여 지도에 마커를 찍고자 services 라이브러리를 사용했습니다.

허나 자꾸 스크립트 오류가 나서 디버깅 해보니,

ps.keywordSearch( keyword, placesSearchCB); 이 구문에서 스크립트 오류가 나더군요…;;

혹 keywordSearch 메소드 호출 시 libraries에 services 추가하는것 말고 필요한 것이 더 있을까요?

관심과 조언 부탁드립니다.

2

문제가 되는 코드를 알려주시면 바로 확인해보겠습니다.

1개의 좋아요
3

코드는 아래 코드이고, 카카오v2키 사용시 스크립트 오류가 발생하는걸 발견했습니다.
카카오 이전 http://apis.daum.net/maps/maps3.js?apikey= 다음키를 사용하였을땐 정상적으로 되더군요 ㅠㅠ
무슨 차이인지 궁금합니다…

var infowindow = new daum.maps.InfoWindow({zIndex:1});
var container = document.getElementById(‘map’);
var options = {
center: new daum.maps.LatLng(36.396166, 127.352146),
level: 3
};

	var map = new daum.maps.Map(container, options);

// 장소 검색 객체를 생성합니다
var ps = new daum.maps.services.Places();
// 주소-좌표 변환 객체를 생성합니다
var geocoder = new daum.maps.services.Geocoder();

function PlaceSearch(sch, addr)
{
if(addr == true)
{
geocoder.addressSearch(sch, placesSearchCB);
}
else
{
ps.keywordSearch(sch, placesSearchCB);
}
}
ObjectforScription = this;
var dataSend=’’;
// 키워드 검색 완료 시 호출되는 콜백함수 입니다
function placesSearchCB (status, data, pagination) {
if (status === daum.maps.services.Status.OK) {

    // 검색된 장소 위치를 기준으로 지도 범위를 재설정하기위해
    // LatLngBounds 객체에 좌표를 추가합니다
    var bounds = new daum.maps.LatLngBounds();
	var dataSet;

	dataSend = '';
    for (var i=0; i<data.places.length; i++) {

// displayMarker(data.places[i]);
dataSet = ‘|&Coord’+data.places[i].latitude+’,’+data.places[i].longitude+’&Title’+data.places[i].title;
setData(dataSet);
bounds.extend(new daum.maps.LatLng(data.places[i].latitude, data.places[i].longitude));
// location.href(‘DaumMap.html?’+’&Coord’+data.places[i].latitude+’,’+data.places[i].longitude+’&Title’+data.places[i].title);
}
// 검색된 장소 위치를 기준으로 지도 범위를 재설정합니다
sendData(‘poi’);
map.setBounds(bounds);
}
}

function sendData(type)
{
location.href=‘DaumMap.html/’+’#’+type+dataSend;
}

function setData(data)
{
dataSend += data;
}

function setCenter(lat, lon) {
// 이동할 위도 경도 위치를 생성합니다
var moveLatLon = new daum.maps.LatLng(lat, lon);

// 지도 중심을 이동 시킵니다
map.setCenter(moveLatLon);

}
var circle=null;
function drawCircle(lat, lon, radius)
{
if(circle != null)
{
circle.setMap(null);
}
circle = new daum.maps.Circle({
map: map,
center : new daum.maps.LatLng(lat, lon),
radius: radius,
strokeWeight: 2,
strokeColor: ‘#FF00FF’,
strokeOpacity: 0.8,
strokeStyle: ‘dashed’,
fillColor: ‘#00EEEE’,
fillOpacity: 0.5
});
// 지도에 원을 표시합니다
circle.setMap(map);
}

var polyline = new Array();
function drawLine(lat_s, lon_s, lat_e, lon_e, color, allow)
{
var linePath = [
new daum.maps.LatLng(lat_s, lon_s),
new daum.maps.LatLng(lat_e, lon_e)
];
var pline;
// 지도에 표시할 선을 생성합니다
pline = new daum.maps.Polyline({
endArrow: allow,
path: linePath, // 선을 구성하는 좌표배열 입니다
strokeWeight: 5, // 선의 두께 입니다
strokeColor: color, // 선의 색깔입니다
strokeOpacity: 0.7, // 선의 불투명도 입니다 1에서 0 사이의 값이며 0에 가까울수록 투명합니다
strokeStyle: ‘solid’ // 선의 스타일입니다
});

polyline.push(pline);
pline.setMap(map);

}

var label = new Array();
function drawLabel(lat, lon, text)
{
var content = ‘

’+text+’
’;
var lb = new daum.maps.CustomOverlay({
map:map,
position:new daum.maps.LatLng(lat, lon),
content:content,
xAnchor: 0.45,
yAnchor: 0.25
});

label.push(lb);
lb.setMap(map);

}

daum.maps.event.addListener(map, ‘click’, function(mouseEvent) {
if(isMouseOver==true)
{
return;
}

// 클릭한 위도, 경도 정보를 가져옵니다 
var latlng = mouseEvent.latLng; 

clear(2);

var message = latlng.getLat() + ' , ' + latlng.getLng();
dataSend='';
var coord = '|Coord'+latlng.getLat()+','+latlng.getLng();
setData(coord);
sendData('click');

});

// 지도에 마커를 표시하는 함수입니다
var isMouseOver=false;
var marker=new Array();
function drawMarker(title, lat, lon) {
// 마커 이미지의 이미지 주소입니다
//var imageSrc = “http://t1.daumcdn.net/localimg/localimages/07/mapapidoc/markerStar.png”;
// 마커 이미지의 이미지 크기 입니다
//var imageSize = new daum.maps.Size(24, 35);

// 마커 이미지를 생성합니다    
//var markerImage = new daum.maps.MarkerImage(imageSrc, imageSize); 
// 마커를 생성하고 지도에 표시합니다
mk = new daum.maps.Marker({
    map: map,
    position: new daum.maps.LatLng(lat, lon)
});

mk.setClickable(true);
mk.setMap(map);
setCenter(lat, lon);

// 마커에 마우스오버 이벤트를를 등록합니다
daum.maps.event.addListener(mk, 'mouseover', function() {
    // 마커를 클릭하면 장소명이 인포윈도우에 표출됩니다
    infowindow.setContent('<div style="padding:5px;font-size:12px;">' + title + '</div>');
    infowindow.open(map, mk);
	isMouseOver = true;
});
// 마커에 마우스아웃 이벤트를 등록합니다
daum.maps.event.addListener(mk, 'mouseout', function() {
	// 마커에 마우스아웃 이벤트가 발생하면 인포윈도우를 제거합니다
	infowindow.close();
	isMouseOver = false;
});
marker.push(mk);

}

function clear(type)
{
switch(type)
{
case 1 :
{
for(var i=0; i<polyline.length; i++)
{
polyline[i].setMap(null);
}
}
break;
case 2 :
for(var i=0; i<marker.length; i++)
{
marker[i].setMap(null);
}
break;
case 3 :
for(var i=0; i<label.length; i++)
{
label[i].setMap(null);
}
break;
}
}

4

일단 직접 돌려보지는 않았지만
구 버전에서 마이그레이션 한 경우에 기존 코드를 그대로 사용하셨다면 문제가 되는 부분은 다음과 같습니다.

이 함수의 구현에 차이점이 있습니다.

기존에는 함수 첫 번째 파라메터로 statusCode를 넘겨준데 반해,
카카오 인증 버전에서는 첫 번째 파라메터로 결과값을 받고 두 번째 파라메터로 statusCode를 받습니다.
일단 이 부분을 바꿔주셔야 하고요.

다음으로 결과값은 기존에도 그랬지만 json 형태로 받게 되는데
이 json 포멧이 예전 방식일때랑 많이 달라졌습니다.
따라서 placesSearchCB 콜백 내부에서 data.xxx 로 접근하는 모든 참조 코드가 변경되어야 합니다.

응답 콜백을 구성하시는 것은
http://apis.map.daum.net/web/documentation/#services_Geocoder_addressSearch
http://apis.map.daum.net/web/documentation/#services_Places_keywordSearch
이 문서를 참조해 주시고

응답 결과는
https://developers.kakao.com/docs/restapi/local#로컬-주소-검색
https://developers.kakao.com/docs/restapi/local#로컬-키워드로-장소-검색
여기를 참조해 주세요.

1개의 좋아요
5

감사합니다 ^^