카테고리 별로 검색해서 지도에 마크 뿌리는거 까지는 됬는데
커스텀 오버레이가 생성되지 않습니다.
div class=placeinfo 안에 데이터는 들어오는데 커스텀 오버레이 생성시 필요한 데이터가 따로 또 있을까요?
function displayPlaceInfo (place) {
console.log(place);
var content = '<div class="placeinfo">' +
' <a class="title" href="' + place.place_url + '" target="_blank" title="' + place.place_name + '">' + place.place_name + '</a>';
console.log(place.road_address_name);
if (place.road_address_name) {
console.log("if");
content += ' <span title="' + place.road_address_name + '">' + place.road_address_name + '</span>' +
' <span class="jibun" title="' + place.address_name + '">(지번 : ' + place.address_name + ')</span>';
} else {
console.log("else");
content += ' <span title="' + place.address_name + '">' + place.address_name + '</span>';
}
content += ' <span class="tel">' + place.phone + '</span>' +
'</div>' +
'<div class="after"></div>';
console.log(content)
console.log(place.y, place.x);
contentNode.innerHTML = content;
placeOverlay.setPosition(new kakao.maps.LatLng(place.y, place.x));
placeOverlay.setMap(map);
}
위 코드로 안되어 아래 커스텀 오버레이 생성하는것 처럼 했는데도 안되네여…
function displayPlaceInfo (place) {
console.log(place);
var content = '<div class="placeinfo">' +
' <a class="title" target="_blank" title="' + place.place_name + '">' + place.place_name + '</a>';
console.log(place.road_address_name);
if (place.address_name) {
console.log("if");
content += ' <span title="' + place.road_address_name + '">' + place.road_address_name + '</span>' +
' <span class="jibun" title="' + place.address_name + '">(지번 : ' + place.address_name + ')</span>';
} else {
console.log("else");
content += ' <span title="' + place.road_address_name + '">' + place.road_address_name + '</span>';
}
content += ' <span class="tel">' + place.phone + '</span>' +
'</div>' +
'<div class="after"></div>';
contentNode.innerHTML = content;
var customOverlay = new kakao.maps.CustomOverlay({
map: map,
clickable: true,
content: content,
position: new kakao.maps.LatLng(place.y, place.x),
xAnchor: 0.5,
yAnchor: 1,
zIndex: 3
});
customOverlay.setMap(map);
}
첫 번째 방법에서 customOverlay.setContent() API를 호출하여 콘텐츠를 넣어주세요.
placeOverlay.setContent(content);
아래 코드 참고해주시고
두 번째 방법은 그대로 사용해도 동작하는데 혹시 contentNode가 선언이 안되어 있나요?
contentNode.innerHTML = content;을 주석해서 확인해주세요.
// 커스텀 오버레이가 표시될 위치입니다
var position = new kakao.maps.LatLng(33.450701, 126.570667);
// 커스텀 오버레이를 생성합니다
var placeOverlay = new kakao.maps.CustomOverlay({});
var place = {
//..
}
function displayPlaceInfo (place) {
var content = '<div class="placeinfo">' +
' <a class="title" href="' + place.place_url + '" target="_blank" title="' + place.place_name + '">' + place.place_name + '</a>';
console.log(place.road_address_name);
if (place.road_address_name) {
console.log("if");
content += ' <span title="' + place.road_address_name + '">' + place.road_address_name + '</span>' +
' <span class="jibun" title="' + place.address_name + '">(지번 : ' + place.address_name + ')</span>';
} else {
console.log("else");
content += ' <span title="' + place.address_name + '">' + place.address_name + '</span>';
}
content += ' <span class="tel">' + place.phone + '</span>' +
'</div>' +
'<div class="after"></div>';
console.log(content);
placeOverlay.setContent(content);
placeOverlay.setPosition(position);
placeOverlay.setMap(map);
}
displayPlaceInfo(place);
답변 감사합니다.
위에 경우 palceOverlay API 설정 후 plaveOverlay.setContent(content)에 값을 셋팅했는데 content에는 값이 셋팅이 되지만 오버레이가 나오지 않습니다.
// 클릭한 마커에 대한 장소 상세정보를 커스텀 오버레이로 표시하는 함수입니다
function displayPlaceInfo (place) {
console.log(place);
var content = '<div class="label">' +
' <a class="title" target="_blank" title="' + place.place_name + '">' + place.place_name + '</a>';
console.log(place.road_address_name);
if (place.address_name) {
console.log("if");
content += ' <span title="' + place.road_address_name + '">' + place.road_address_name + '</span>' +
' <span class="jibun" title="' + place.address_name + '">(지번 : ' + place.address_name + ')</span>';
} else {
console.log("else");
content += ' <span title="' + place.road_address_name + '">' + place.road_address_name + '</span>';
}
content += ' <span class="tel">' + place.phone + '</span>' +
'</div>' +
'<div class="after"></div>';
var position = new kakao.maps.LatLng(place.y, place.x);
contentNode.innerHTML = content;
console.log(position);
console.log(content)
placeOverlay.setContent(content);
placeOverlay.setPosition(new kakao.maps.LatLng(position));
placeOverlay.setMap(map);
}
아래의 경우 contentNode는 상위에 선언 되어있습니다.
위 소스와 동일하게 기존 카카오맵에서 제공하는 카테고리별 장소검색으로 하면 오버레이가 호출되나
ps.categorySearch을 거치지 않고 오게되면 오버레이가 생성되지 않습니다.
categorySearch를 거치치 않고 호출할 경우
place 속성 값에 장소 데이터와 x, y좌표값이 올바른지 확인해주세요.
na {Ga: 35.135816098, Ha: 129.08633527}
console.log에 찍힌 결과값입니다. 현재 plaace속성 값과 position에 있는 값은 일치 합니다.
position 설정이 올바르지 않습니다.
아래 코드 참고해주세요.
var position = new kakao.maps.LatLng(place.y, place.x);
placeOverlay.setPosition(position); (O)
// 또는 placeOverlay.setPosition(new kakao.maps.LatLng(place.y, place.x));
placeOverlay.setPosition(new kakao.maps.LatLng(position)); (X)
var position = new kakao.maps.LatLng(place.y, place.x);
contentNode.innerHTML = content;
placeOverlay.setPosition(position);
placeOverlay.setContent(content);
placeOverlay.setMap(map);
수정 하였는데도 안됩니다…
카태고리별 장소 검색을 이용해서 하면 오버레이가 표출된다고 하셨는데
그러면 로직 상의 문제는 없어 보입니다.
카테고리별 장소 검색에서 받은 place 데이터는 x, y 키 값을 갖고 있기 때문에
var position = new kakao.maps.LatLng(place.y, place.x); 로 LatLng 객체를 만듭니다.
위에 주신 로그 보면 position 값이 처음부터 latlng 객체인 것 같은데
따로 LatLng을 생성하지 않고 해당 값을 setPosition에 넣어주세요.
http://apis.map.kakao.com/web/documentation/#LatLng
http://apis.map.kakao.com/web/documentation/#CustomOverlay
