카카오 MAP Api 직접해보기에서는 해당데이터를 직접 넣어서 했을때는 중심좌표가 맞춰서 잘 나오는데,
코드작성하면…자꾸상단위에 가있네요…
코드는
<script>
window.onload = function () {
var lng = ${deviceLocInfo.xcrd};
var lat = ${deviceLocInfo.ycrd};
var dvcId = ${deviceLocInfo.dvcId};
var userId = '${deviceLocInfo.userId}';
var userName = '${deviceLocInfo.userName}';
var connectDateStr = '${deviceLocInfo.connectDateStr}';
var mapContainer = document.getElementById('map'),
mapOption = {
center: new kakao.maps.LatLng(lat, lng), // 지도의 중심좌표
level: 4 // 지도의 확대 레벨
};
var map = new kakao.maps.Map(mapContainer, mapOption); // 지도를 생성
//지도 범위 재배치
var points = new kakao.maps.LatLng(lat, lng);
var bounds = new kakao.maps.LatLngBounds();
var marker = new kakao.maps.Marker({position: points});
marker.setMap(map);
bounds.extend(points);
// 라벨 생성 및 표시
var label = new kakao.maps.CustomOverlay({
map: map,
content: '<div style="height: 20px; padding:2px 5px;background:#fff; border: solid 1.5px #666;">ID:' + dvcId + '</div>',
position: marker.getPosition(),
xAnchor: 0.5,
yAnchor: -0.5
});
// 인포윈도우 내용
var content =
'<div class="wrap">' +
' <div class="info">' +
' <div class="title">' + dvcId + '</div>' +
' <div class="body">' +
' <div class="desc">' +
' <div class="ellipsis">' + userName + '(' + userId + ')' + '</div>' +
' <div class="ellipsis">' + connectDateStr + '</div>' +
' </div>' +
' </div>' +
' </div>' +
'</div>';
// 인포윈도우 표시
var infoWindow = new kakao.maps.CustomOverlay({
clickable: true, // 커스텀 오버레이 클릭 시 지도에 이벤트를 전파하지 않도록 설정
content: content,
map: map,
position: marker.getPosition()
});
infoWindow.setMap(null);
kakao.maps.event.addListener(marker, 'mouseover', showOverlayListener(map, marker, infoWindow));
kakao.maps.event.addListener(marker, 'mouseout', hideOverlayListener(infoWindow));
function showOverlayListener(map, marker, infoWindow) {
return function () {
infoWindow.setMap(map);
};
}
function hideOverlayListener(infoWindow) {
return function () {
infoWindow.setMap(null);
};
}
map.setBounds(bounds);
};
</script>
