웹에서 지도를 두개띄우고 화면을 회전하는경우 마커가 사라지는 상황입니다

카카오맵 API (지도/로컬)
,
1

안녕하세요 현재 모바일 웹페이지에서 기본 MAP 1과 버튼 클릭시 나타나는 MAP2 기능을 사용중입니다.
MAP2 에서 화면을 가로 또는 세로로 회전하고 다시 MAP1으로 돌아가면 기존에 보이던 마커가 사라지는 현상이 발생하고있습니다. 또한 맵 API의 확대 축소 또한 장애를 일으키고있습니다.

그리고 MAP1에서 다시 화면을 전환하면 사라졌던 마커가 생겨나는 현상입니다.

마커가 사라지는 상황에서 마커의 포지션이나 z-index를 찍어보면 여전히 값은 유지되고있고 단지 마커만 보이지 않고 있습니다.

현재 지도는

var mapContainer = document.getElementById(‘Map’),
mapOption = {
center: new daum.maps.LatLng(37.#####, 126.#####),
level: 14,
draggable:true,
scrollwhell:true,
};
var oMap = new daum.maps.Map(mapContainer, mapOption);

버튼 클릭 function (){
mapContainer2 = document.getElementById(‘Map2’);
mapOption2 = {
center: new daum.maps.LatLng(mylat, mylon),
level: 5,
draggable:true,
scrollwhell:true,
};

console.log(mylat+"////"+mylon);

oMap2 = new daum.maps.Map(mapContainer2, mapOption2);
////
////

}
이런 식으로 생성되고있습니다.

2

다음지도는 지도 영역이 바뀔 경우에 지도의 중심이 유지되지 않으므로
map.relayout() 함수와 map.setCenter()로
지도의 영역 및 중심을 다시 지정해 주어야 합니다.

var map = new daum.maps.Map(document.getElementById('map'), {
  center: new daum.maps.LatLng(XXX, XXX),
  level: 4
});
var center = map.getCenter();

daum.maps.event.addListener(map, 'drag', function (event) {
  center = map.getCenter();
});

daum.maps.event.addListener(map, 'zoom_changed', function (event) {
  center = map.getCenter();
});

var marker = new daum.maps.Marker({
  position: new daum.maps.LatLng(XXX, XXX),
  map: map
});

$(window).on('orientationchange', function(event) {
  map.relayout();
  map.setCenter(center);
});

위 코드는 세로/가로 모드 변환시 지도 중심을 유지시키는 코드입니다.

일단 이것을 먼저 적용시켜보시고
그 이후에 잘 안되는 현상에 대해서 추가로 얘기해 보시죠.

4

알려주신 방법을 적용하고 화면이 전환 될 때마다 center값을 받아와서 적용시키니 정상적으로 작동이 됩니다. 감사합니다.

1개의 좋아요