웹 페이지에 지도 보기 버튼을 누르면 지도를 그리고 지도 접기를 클릭하면 지도가 접어지는 기능을 넣었습니다.
작동은 아주 잘되는데 현재 사파리에서만 지도 보기 후 지도를 접어 숨겨버리면 몇 초 후 웹페이지 자체가 스크립트가 멈춰버려서 아무것도 작동되지 않는 현상이 발생하여 테스트를 해보니 markerTracker.run(); 기능 자체를 제거 하면 문제가 발생 되지 않았습니다.
그래서 다른 글 참조 후 지도 접기할때 markerTracker.stop(); 를 넣어 보았는데도 문제는 해결되지 않아서 문의드립니다.
모달 또는 탭이 창이 열릴 때 markerTracking.run();
닫힐 때 markerTracking.stop(); 을 하면 크롬, 사파리 모두 정상 동작이 되는 걸로 보입니다.
다시 한번 확인 부탁드리고 현상을 확인할 수 있는 코드도 함께 첨부해 주세요.
대략적인 구조로만 보여드리면 이렇게 되어있습니다.
지도보기 클릭 시 searchArray를 반복문 돌려 마커를 찍습니다 같은 이름으로 선언된 markerTracker를 계속써서 stop시 죽지 않는걸까요…?
<script>
//여기 영역에 MarkerTracker() function 있습니다.
$(function(){
//선언
var mapContainer = document.getElementById('map'), // 지도를 표시할 div
mapOption = {
center: new kakao.maps.LatLng(33.450701, 126.570667), // 지도의 중심좌표
level: 6 // 지도의 확대 레벨
};
var apimap = new kakao.maps.Map(mapContainer, mapOption);
var marker = new kakao.maps.Marker();
var infowindow = new kakao.maps.InfoWindow();
var markerTracker = new MarkerTracker(apimap, marker);
function addMarker(position, normalOrigin, overOrigin, clickOrigin, info) {
//여기서 마커생성, 인포윈도우, 마커addListener 등을 처리
markerTracker = new MarkerTracker(apimap, marker);
markerTracker.run();
}
$(".mapBtn").click(function(){
if($(this).hasClass('hide')){
//지도접기클릭할때
MarkerTracker.stop();
}else{
//지도보기클릭할때
//searchArray 마커배열리스트로 마커찍기
searchArray.forEach(function(value,index){
searchAddr = value.searchAddr;
// 주소-좌표 변환 객체를 생성합니다
var geocoder = new kakao.maps.services.Geocoder();
// 주소로 좌표를 검색합니다
geocoder.addressSearch(searchAddr, function(result, status) {
// 정상적으로 검색이 완료됐으면
if (status === kakao.maps.services.Status.OK) {
var coords = new kakao.maps.LatLng(result[0].y, result[0].x);
// 마커를 생성하고 지도위에 표시합니다
addMarker(coords, normalOrigin, overOrigin, clickOrigin, value.H_name);
}
});
});
}
});
});
</script>
지도가 보이지 않은 상태에서 run이 호출돼서 생긴 문제인데요.
반복문에서 생성한 Marker와 MarkerTracker를 배열로 관리한 다음
지도가 화면에 보일 때 run, 보이지 않을 때 stop을 호출해 주세요.
코드도 함께 참고해주세요.
let markers = [];
let markerTrackers = [];
list.forEach(function(value,index){
// 주소-좌표 변환 객체를 생성합니다
var geocoder = new kakao.maps.services.Geocoder();
// 주소로 좌표를 검색합니다
geocoder.addressSearch(value, function(result, status) {
// 정상적으로 검색이 완료됐으면
if (status === kakao.maps.services.Status.OK) {
let coords = new kakao.maps.LatLng(result[0].y, result[0].x);
let marker = new TooltipMarker(coords, value);
let markerTracker = new MarkerTracker(map, marker);
//생성한 marker와 markerTracker를 배열에 추가합니다.
markers.push(marker);
markerTrackers.push(markerTracker);
}
});
});
//지도를 표시, 숨기는 버튼 이벤트
function modalOpen() {
const el = document.getElementById('modal');
if(el.classList.contains('hidden')) {
el.classList.remove('hidden');
map.relayout();
markerTrackers.forEach(tracker => tracker.run());
} else {
el.classList.add('hidden');
markerTrackers.forEach(tracker => tracker.stop());
}
}
배열에 담아서 하는 형식으로 하니 stop 잘되는거 확인했습니다~
다만 지도접기 지도열기를 몇번하다보면 일정시간 뒤 사파리에서 스크립트 전체가 멈추는 현상은 해결하지 못했네요…
답변 감사합니다.