Flutter 에서 웹뷰 통해서 지도를 띄워주고 있는데 center 가 왼쪽 끝에서 나오고 있습니다.
어떤 이슈인지 확인해주실 수 있으신가요?
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
</head>
<style>
body {
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;
}
.dot {
height: 10px;
width: 10px;
background-color: #3A67F9;
border-radius: 50%;
display: inline-block;
}
</style>
<body style="margin:0px; background-color: transparent">
<div id="map" style=`width:100%;height:${height}px;margin:0px;`></div>
<script type="text/javascript" src="https://dapi.kakao.com/v2/maps/sdk.js?appkey=${AppConfig.kakaoJavaScriptKey}&libraries=services"></script>
<script>
const container = document.getElementById('map');
const initPosition = new kakao.maps.LatLng($lat, $lng);
const options = {
center: initPosition,
level: 4
};
const map = new kakao.maps.Map(container, options);
// Marker
let marker;
if(${marker != null}){
const markerSize = new kakao.maps.Size(${marker?.toSize().$1 ?? 0}, ${marker?.toSize().$2 ?? 0});
const markerOption = {
offset: new kakao.maps.Point(${marker?.toOffset().$1 ?? 0}, ${marker?.toOffset().$2 ?? 0})
};
const markerSrc = '${marker?.toImage() ?? ""}';
const markerImage = new kakao.maps.MarkerImage(markerSrc, markerSize, markerOption);
marker = new kakao.maps.Marker({
map: map,
position: initPosition,
image: markerImage,
});
} else {
const markerSize = new kakao.maps.Size(50, 50);
const markerOption = {
offset: new kakao.maps.Point(25, 50)
};
marker = new kakao.maps.Marker({
map: map,
position: initPosition,
});
}
marker.setMap(map);