카테고리별로 다중마커 표시후 해당하는 위치에 다중 오버레이를 올리고 싶은데 가능할까요
기본적으로
다양한 이미지 마커 표시하기 - Kakao 지도 Web API(다양한 이미지 마커 표시하기)
위에
닫기가 가능한 커스텀 오버레이 - Kakao 지도 Web API(닫기가 가능한 커스텀 오버레이)
를 올리고싶어서 문의드립니다. 도움주시면 감사드리겠습니다
가능합니다. 각 카테고리의 마커를 생성할 때 커스텀 오버레이도 같이 생성해주세요.
map 옵션을 적용해서 오버레이를 생성해서 바로 지도에 표시하거나
마커 클릭 이벤트를 등록해서 마커 클릭 시 overlay.setMap(map); API를 호출해서 커스텀 오버레이를 지도에 표시해주세요.
주의하실 점은 커스텀 오버레이 생성 시 content는 문자열이 아닌 HTMLElement로 생성해서 이벤트를 등록해주시고
스코프 유지를 위해 forEach 반복문을 사용하거나
for 반복문 내 변수를 ES6의 let 또는 const로 선언해주세요.
아래 답변 함께 참고해주세요.
https://devtalk.kakao.com/t/topic/103147/2?u=lea.ju
1개의 좋아요
답변 감사합니다.
현재 진행중인 코드인데 마커생성할때 오버레이 같이 생성했구 content생성했는데 이게 HTMLElement 인지는 잘모르겠습니다.
// 커피숍 마커를 생성하고 커피숍 마커 배열에 추가하는 함수입니다
function createCoffeeMarkers() {
for (var i = 0; i < coffeePositions.length; i++) {
var imageSize = new kakao.maps.Size(22, 26),
imageOptions = {
spriteOrigin: new kakao.maps.Point(10, 0),
spriteSize: new kakao.maps.Size(36, 98),
};
// 마커이미지와 마커를 생성합니다
var markerImage = createMarkerImage(markerImageSrc, imageSize, imageOptions),
marker = createMarker(coffeePositions[i], markerImage);
var content =
'<div class="wrap">' +
' <div class="info">' +
' <div class="title">' +
' 카카오 스페이스닷원' +
' <div class="close" onclick="closeOverlay()" title="닫기"></div>' +
' </div>' +
' <div class="body">' +
' <div class="img">' +
' <img src="https://cfile181.uf.daum.net/image/250649365602043421936D" width="73" height="70">' +
' </div>' +
' <div class="desc">' +
' <div class="ellipsis">제주특별자치도 제주시 첨단로 242</div>' +
' <div class="jibun ellipsis">(우) 63309 (지번) 영평동 2181</div>' +
' <div><a href="https://www.kakaocorp.com/main" target="_blank" class="link">홈페이지</a></div>' +
' </div>' +
' </div>' +
' </div>' +
'</div>';
//오버레이 생성
var overlay = new kakao.maps.CustomOverlay({
content: content,
position: marker.getPosition()
});
// 생성된 마커를 커피숍 마커 배열에 추가합니다
coffeeMarkers.push(marker);
infowindowcontent.push(overlay);
}
};
// 커피숍 마커들의 지도 표시 여부를 설정하는 함수입니다
function setCoffeeMarkers(map) {
for (var i = 0; i < coffeeMarkers.length; i++) {
coffeeMarkers[i].setMap(map);
}
}
function setinfowindowcontent(map) {
for (var i = 0; i < coffeeMarkers.length; i++) {
kakao.maps.event.addListener(marker, 'click', function() {
infowindowcontent[i].setMap(map);
});
}
}
말씀하신 자료 읽어봤습니다.
document.createElement 로 HTMLElement 를 구성후 다시 content로 넘겨준다는것은 알겠으나
var content = document.createElement(‘div’); 이 div안에 content내용을 넣으라는 말씀인지 잘모르겠습니다.
또한 foreach 사용시 오류가 발생합니다.
알려주신예제보며 조금더 붙혀 봤습니다.`// 마커이미지의 주소와, 크기, 옵션으로 마커 이미지를 생성하여 리턴하는 함수입니다
function createMarkerImage(src, size, options) {
var markerImage = new kakao.maps.MarkerImage(src, size, options);
return markerImage;
}
// 좌표와 마커이미지를 받아 마커를 생성하여 리턴하는 함수입니다
function createMarker(position, image) {
var marker = new kakao.maps.Marker({
position: position,
image: image
});
return marker;
}
// 커피숍 마커를 생성하고 커피숍 마커 배열에 추가하는 함수입니다
function createCoffeeMarkers() {
for (var i = 0; i < coffeePositions.length; i++) {
var imageSize = new kakao.maps.Size(22, 26),
imageOptions = {
spriteOrigin: new kakao.maps.Point(10, 0),
spriteSize: new kakao.maps.Size(36, 98),
};
// 마커이미지와 마커를 생성합니다
var markerImage = createMarkerImage(markerImageSrc, imageSize, imageOptions),
marker = createMarker(coffeePositions[i], markerImage);
// 생성된 마커를 커피숍 마커 배열에 추가합니다
coffeeMarkers.push(marker);
}
};
/*
coffeeMarkers.forEach(function(cof){
var overlay = new kakao.maps.CustomOverlay({
content: content,
position: coffeeMarkers
});
var content = document.createElement('div');
var closeBtn = document.createElement('button');
closeBtn.appendChild(document.createTextNode('닫기'));
closeBtn.onclick = function() { customOverlay.setMap(null); };
content.appendChild(closeBtn);
overlay.setContent(content);
overlay.setMap(map);
});
*/
for(var i=0; i<coffeeMarkers.length; i++){
//오버레이 생성
var overlay = new kakao.maps.CustomOverlay({
zindex:1,
content: content,
position: coffeeMarkers[i].getPosition()
});
var content =
'<div class="wrap">' +
' <div class="info">' +
' <div class="title">' +
' 카카오 스페이스닷원' +
' <div class="close" onclick="closeOverlay()" title="닫기"></div>' +
' </div>' +
' <div class="body">' +
' <div class="img">' +
' <img src="https://cfile181.uf.daum.net/image/250649365602043421936D" width="73" height="70">' +
' </div>' +
' <div class="desc">' +
' <div class="ellipsis">제주특별자치도 제주시 첨단로 242</div>' +
' <div class="jibun ellipsis">(우) 63309 (지번) 영평동 2181</div>' +
' <div><a href="https://www.kakaocorp.com/main" target="_blank" class="link">홈페이지</a></div>' +
' </div>' +
' </div>' +
' </div>' +
'</div>';
overlay.setContent(content);
kakao.maps.event.addListener(coffeeMarkers[i], 'click', function(o) {
return function() {
o.setMap(map);
}
}(overlay));
}
function closeOverlay() {
overlay.setMap(null);
}
// 커피숍 마커들의 지도 표시 여부를 설정하는 함수입니다
function setCoffeeMarkers(map) {
for (var i = 0; i < coffeeMarkers.length; i++) {
coffeeMarkers[i].setMap(map);
}
}
`
답변달아주셔서 감사합니다
forEach문에서 CustomOverlay생성 시
content 변수 선언 전에 content를 적용하고 있으며
position 값도 잘못 설정하고 있습니다.
마커를 모두 생성한 다음 오버레이를 생성할 수 있게 구현해주시고
아래 코드 참고해주세요.
coffeeMarkers.forEach(function(cof){
var overlay = new kakao.maps.CustomOverlay({
position: cof.getPosition()
// content: content,
// position: coffeeMarkers
});
var content = document.createElement('div');
var closeBtn = document.createElement('button');
closeBtn.appendChild(document.createTextNode('닫기'));
closeBtn.onclick = function() { overlay.setMap(null); };
content.appendChild(closeBtn);
overlay.setContent(content);
overlay.setMap(map);
});
해결되었습니다 감사합니다!!! 건강하세요!
1개의 좋아요