안녕하세요. 아래 답변을 보고 작업 중입니다.
웹에서 지도를 두개띄우고 화면을 회전하는경우 마커가 사라지는 상황입니다 - 지도/로컬 API - 카카오 데브톡 (kakao.com)
window orientation 변경 시 이벤트는 잘 동작하며 relayout 및 setCenter 호출을 하고 있으나 직 후에 center_changed 이벤트가 불리고 있으며 center_changed시의 map의 center가 다시 틀어져 있습니다.
순서로 보아서는 setCenter 시에 적용한 좌표로 중심이 제대로 이동하지 않고 틀어진 좌표로 맵이 이동하여 center_changed 가 불린 것 같은데, 추가적으로 확인해야 할 사항이 있을까요?
관련 코드는 아래와 같습니다
var mapContainer = document.getElementById('map');
var mapOption = {
center: new kakao.maps.LatLng(0, 0),
level: 5,
disableDoubleClickZoom: true
};
var map = new kakao.maps.Map(mapContainer, mapOption);
var center = map.getCenter();
$(window).on('orientationchange', function(event) {
console.log('Orientation Changed: ' + center.getLat() + ', ' + center.getLng());
map.relayout();
map.setCenter(center);
sendMessage('Orientation Changed: ' + center.getLat() + ', ' + center.getLng());
setTimeout(function(){
}, 100);
});
kakao.maps.event.addListener(map, 'click', function(mouseEvent) {
var latlng = mouseEvent.latLng;
sendMessage('Clicked: ' + latlng.getLat() + ', ' + latlng.getLng());
window.android.onClick(latlng.getLat(), latlng.getLng());
});
kakao.maps.event.addListener(map, 'center_changed', function() {
center = map.getCenter();
sendMessage('Center Changed: ' + center.getLat() + ', ' + center.getLng());
window.android.onCameraPosition(center.getLat(), center.getLng());
});
kakao.maps.event.addListener(map, 'drag', function(event) {
center = map.getCenter();
sendMessage('Dragged: ' + level);
});
kakao.maps.event.addListener(map, 'zoom_changed', function() {
center = map.getCenter();
let level = map.getLevel();
sendMessage('Zoom Changed: ' + level);
window.android.onZoomChanged(level);
});