<html lang="ko">
<body style='margin: 0; padding: 0;'>
<div id="map" style='width: 100%; height: 100%;'></div>
</body>
<script type="text/javascript" src="https://dapi.kakao.com/v2/maps/sdk.js?appkey=${env.kakao.javascriptKey}&libraries=services,clusterer,drawing"></script>
<script>
const container = document.getElementById('map'); //지도를 담을 영역의 DOM 레퍼런스
let center = new kakao.maps.LatLng(33.450701, 126.570667);
if ($hasCenter) {
center = new kakao.maps.LatLng(${widget.center?.latitude}, ${widget.center?.longitude});
}
let options = { center: center, level: 1 };
const map = new kakao.maps.Map(container, options); //지도 생성 및 객체 리턴
map.setMinLevel(1);
map.setMaxLevel(15);
console.log(map);
</script>
</html>
Flutter 앱 내에서 웹뷰를 통해 지도 HTML을 랜더링 하는 상태입니다.
지도 위젯의 상위 위젯은 Flexible 위젯으로, 너비, 높이 100%를 통해 앱바 영역을 제외한 모든 영역에 지도가 들어가는 지금 모습이 의도된 상태입니다.
문제가 되는 것은 확대 수준입니다.
레벨 1 (좌측 하단 거리 표시 20M) 상태에서 요소들이 저렇게 작게 보입니다.
pub.dev에 올라와 있는 라이브러리로 필요한 모든 것을 구현할 수 없어 불가피하게 직접 구현하는 상황인데
저 확대 수준을 도저히 잡지 못하겠습니다.
어떻게 해결할 수 있는지 도움이 필요합니다.