[FAQ] 지도/로컬 API 문의 전 꼭 읽어 주세요.
https://devtalk.kakao.com/t/faq-api/125610
안녕하세요
https://apis.map.kakao.com/web/sample/multipleMarkerEvent2/
위의 링크를 참고하여 다중 마커에 이벤트를 발생하려합니다.
가이드와 동일하게 제작 후 확인해보는데
위치에 대한 값을 DB에서 받아와 반복하여 화면에 표시하는 부분까지는 완료했습니다
그런데 다중 마커핀에 마우스를 올렸을 때 아예 이벤트가 발생하지 않아 문의드립니다
대략적인 코드는 이렇습니다.
function markersInfo(area, markerCount) {
var addMarker = "";
var content = "";
var addMakeInfoWindow = "";
area.forEach((element) => {
markerCount++;
var markerPinImageUrl = '~~~~.png';
addMarker = new kakao.maps.Marker({
position: new kakao.maps.LatLng(element.lat, element.lng),
map: map,
draggable: true,
image: new kakao.maps.MarkerImage(markerPinImageUrl, imageSize, imageOption),
title: ("addMarker" + markerCount)
});
kakao.maps.event.addListener(addMarker, 'mouseover', function() {
console.log("markersInfo mouseover 이벤트 실행테스트")
})
참고로 위의 메서드의 경우 맵을 초기화 시켜주는 과정에서 실행됩니다.
areaPosition 값에 데이터가 담겨 들어오기때문에 정상적으로 실행은 되는데,
이벤트 추가하는 위치가 잘못된건지, 아니라면 forEach문을 도는 과정에서 이벤트를 추가한게 문제인건지 원인을 찾을 수 없어 문의드립니다.
case "section" :
$.post('$..,
function(data) {
// 데이터 전달받아 화면 그려준 후
}
// 센서 좌표 설정 및 수정 안할 때
if (count % 2 == 0) {
if (areaPosition) flightPath = makeKakaoPolygon(areaPosition);
if (Info != "emptySensorType") sensorGroupMarkerColor();
// 센서 좌표 수정할 때(수정버튼 클릭 시)
} else if (count % 2 != 0) {
sectionPosition();
}
function sectionPosition() {
$("#sectionPositionInfo").empty();
$("#sectionZoomLevel").text(map.getLevel());
imgAlert('원하는 곳을 클릭', "${~~png", 50);
if (areaPosition) {
markerCount = markersInfo(areaPosition, markerCount);
} else {
// css 설정
}
commonKakaoEvent()
kakao.maps.event.addListener(map, 'click', addSectionMarker);
}
});
break;
이벤트 자체가 동작하지 않는 다는 것일까요?
아니면 mouseover 이벤트는 발동하는데, 원하는 기능이 안된다는 것일까요?
위 코드상 addMarker라는 마커객체에 이벤트가 할당이 되는 코드이긴 합니다. forEach랑은 연관이 없습니다.
음… 콘솔에서 에러메세지나 이러한게 있다면, 제공해 주실 수 있으실까요?
전자의 의미입니다 이벤트 자체가 아예 동작하질 않네요
기존에 DB에서 가져온 값들에 대해서는 이벤트가 아예 동작하지 않고,
신규로 생성해준 마커에 대해서만 이벤트가 동작하고 있습니다
그런데 저는 DB에서 가져온 값도, 신규로 생성하는 값도 모두 addMarker라는 객체에 넣어주고 있어요
에러 메시지라도 확인하고 싶어 콘솔을 찍어봤지만 이벤트가 아예 발생하지조차 않더라구요…
대신에 addMarker 객체에 대한 콘솔을 확인해보니, 객체 내부에 이벤트가 생기긴 했습니다
위에 작성된 코드 자체에는 문제가 없는 것이라면 어떤 부분이 문제가 될 수 있나요??
음… 지도API의 사용관련된 부분에서의 오류는 딱히 안보이는데;
전체적인 어플리케이션 흐름을 봐야할것 같습니다;
현재 DB에서 데이터를 가져오신다고 하셨는데,
해당 데이터를 잘 가져오고, 실제 마커도 모두 지도위에 찍히고 있는 것이지요?
마우스오버뿐만 아니라, 다른 이벤트 핸들러들도 등록이 잘되는지 확인부탁드리고, 만약 외부에서 접근할 수 있다면, 저한테 메세지로 보내주셔도 됩니다.
해당 로직이 DB에서 값을 가져올때 제대로 실행이 되는지, 크롬디버깅툴을 이용해서 소스탭 이용해서 디버깅을 해보셔도 되고,
로깅을 해서 알아보셔도 될것 같습니다.
올려주신 코드만 보면 이벤트가 딱히 반응이 안될이유는 없습니다. 위 코드의 잠재적인 위험은
kakao.maps.event.addListener(addMarker, 'mouseover', function() {
console.log("markersInfo mouseover 이벤트 실행테스트")
})
function() {}이라는 핸들러 내부에서 각각의 addMarker객체에 접근할 수 없다는 것 빼고는,
이벤트 자체가 실행이 안될이유는 없습니다.
아무튼 제가 접근할 수 있거나, 데이터가 대외비라면 데이터를 제외하고 오류가 발생하는 코드를 만들어 주실 수 있으실까요?
데이터는 더미데이터로 area[{lat, lng} …] 이렇게 대충 만들어서 확인해 볼 수 있거든요.
한번 부탁드립니다.
전체적인 코드 흐름을 봐야합니다.
단편적인 코드블럭 이슈는 아닌것으로 보이긴 합니다.
<div id="map" style="width:100%;height:350px;"></div>
<div id="roadview" style="width:100%;height:300px;"></div>
<script>
var mapContainer = document.getElementById('map'), // 지도를 표시할 div
mapOption = {
center: new kakao.maps.LatLng(33.450701, 126.570667), // 지도의 중심좌표
level: 3 // 지도의 확대 레벨
};
var map = new kakao.maps.Map(mapContainer, mapOption); // 지도를 생성합니다
function markersInfo(area, markerCount) {
var addMarker = "";
var content = "";
var addMakeInfoWindow = "";
area.forEach((element) => {
markerCount++;
var markerPinImageUrl = '~~~~.png';
addMarker = new kakao.maps.Marker({
position: new kakao.maps.LatLng(element.lat, element.lng),
map: map,
draggable: true,
title: ("addMarker" + markerCount)
});
kakao.maps.event.addListener(addMarker, 'mouseover', function() {
console.log("markersInfo mouseover 이벤트 실행테스트")
});
});
}
const array = [{
lat : 33.450705,
lng : 126.570677
},
{
lat : 33.450936,
lng : 126.569477
},
{
lat : 33.450879,
lng : 126.569940
},
{
lat : 33.451393,
lng : 126.570738
}];
let markerCount = 0;
markersInfo(array, markerCount);
</script>
제가 테스트한 코드입니다. (이미지는 가진게 없어서 마커이미지만 뺐습니다)
올려주신 단편적인 코드로는 이벤트 할당이 안되진 않습니다.
제가 테스트한 코드말고, 만드시고 계시는 어플리케이션의 전체적인 흐름이 필요합니다.
