[FAQ] 지도/로컬 API 문의 전 꼭 읽어 주세요.
https://devtalk.kakao.com/t/faq-api/125610
안녕하세요.
카테고리별 장소 검색하기 예제를 보며 공부하고 있습니다.
마커를 클릭했을 때 각 측정소별(마커) 미세먼지 정보를 띄우는데요, 기존에는 마우스오버 이벤트를 사용했는데 모바일에서는 마우스 오버가 작동하지 않아서 클릭 이벤트로 변경하고 있습니다. content를 dom element로 작성해야 클릭한 마커의 오버레이만 보여진다고 답변주신 것들 다 보면서 해보는데도 안돼서 막막한 마음으로 글을 남겨요… <카테고리별 장소 검색하기> 예제 보면서 따라 만들었어요,
var map = new kakao.maps.Map(mapContainer, mapOption); // 지도를 생성합니다
// 마커를 클릭했을 때 해당 장소의 상세정보를 보여줄 커스텀오버레이입니다
var placeOverlay = new kakao.maps.CustomOverlay({yAnchor: 1.3}),
contentNode = document.createElement('div'), // 커스텀 오버레이의 컨텐츠 엘리먼트 입니다
markers = []; // 마커를 담을 배열입니다
// 공공측정소 위치
var stationPositions = [];
for (var i = 0; i < station.length; i++) {
stationPositions[i] = new kakao.maps.LatLng(Number(station[i].lat),
Number(station[i].lng))
}
var stationMarkers = [], // 측정소 마커 객체를 가지고 있을 배열입니다
createStationMarkers(); // 측정소 마커를 생성하고 측정소 마커 배열에 추가합니다
changeMarker('all'); // 지도에 전체 마커가 보이도록 설정합니다
// 커스텀 오버레이의 컨텐츠 노드에 mousedown, touchstart 이벤트가 발생했을때
// 지도 객체에 이벤트가 전달되지 않도록 이벤트 핸들러로 kakao.maps.event.preventMap 메소드를 등록합니다
addEventHandle(contentNode, 'mousedown', kakao.maps.event.preventMap);
addEventHandle(contentNode, 'touchstart', kakao.maps.event.preventMap);
// 커스텀 오버레이 컨텐츠를 설정합니다
placeOverlay.setContent(contentNode);
// 엘리먼트에 이벤트 핸들러를 등록하는 함수입니다
function addEventHandle(target, type, callback) {
if (target.addEventListener) {
target.addEventListener(type, callback);
} else {
target.attachEvent('on' + type, callback);
}
}
// 좌표와 마커이미지를 받아 마커를 생성하여 리턴하는 함수입니다
function createMarker(position, image) {
var marker = new kakao.maps.Marker({
position : position,
image : image,
clickable : true
// 마커를 클릭했을 때 지도의 클릭 이벤트가 발생하지 않도록 설정합니다
});
return marker;
}
// 측정소 마커를 생성하고 측정소 마커 배열에 추가하는 함수입니다
function createStationMarkers() {
for (var i = 0; i < stationPositions.length; i++) {
var imageSize = new kakao.maps.Size(44, 44);
// 마커이미지와 마커를 생성합니다
var markerImage = new kakao.maps.MarkerImage(stationImageSrc[i], imageSize),
marker = createMarker(stationPositions[i], markerImage);
// 생성된 마커를 커피숍 마커 배열에 추가합니다
stationMarkers.push(marker);
(function(marker) {
kakao.maps.event.addListener(marker, 'click', function() {
displayOverlay();
});
})(marker, stationPositions[i]);
/* contentNode.innerHTML = content;
placeOverlay.setPosition(stationPositions[i]);
placeOverlay.setMap(map);
*/
/* kakao.maps.event.addListener(marker, "mouseover",
makeOverListener(map, marker, placeOverlay));
kakao.maps.event.addListener(marker, "mouseout",
makeOutListener(placeOverlay)); */
/* kakao.maps.event.addListener(marker, 'click', function() {
placeOverlay.setMap(map);
// 지도의 현재 레벨을 얻어옵니다
var level = map.getLevel();
map.setLevel(2, {
anchor : this.getPosition()
});
});
*/
}
}
function displayOverlay() {
for (var i = 0; i < stationPositions.length; i++) {
var content = '<div class="info">' + "미세먼지 " + pm10[i]
+ " μg/m³ " + '<span class="state">' + state10[i]
+ '</span>' + "<br>" + "초미세먼지 " + pm25[i] + " μg/m³ "
+ '<span class="state">' + state25[i] + '</span>'
+ '</div>';
contentNode.innerHTML = content;
placeOverlay.setPosition(stationPositions[i]);
placeOverlay.setMap(map);
}
}
// 측정소 마커들의 지도 표시 여부를 설정하는 함수입니다
function setStationMarkers(map) {
for (var i = 0; i < stationMarkers.length; i++) {
stationMarkers[i].setMap(map);
}
}