<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>카카오맵 거리 이동 좌표 계산</title>
<style>
body { font-family: Arial, sans-serif; margin: 0; padding: 0; }
#map { width: 100%; height: 500px; }
.controls { padding: 10px; background: #f9f9f9; border-bottom: 1px solid #ccc; }
input { margin: 5px; padding: 5px; }
</style>
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=YOUR_APP_KEY"></script>
</head>
<body>
<div class="controls">
기준 좌표:
<input type="number" id="lat" value="37.111111" step="0.000001"> (위도)
<input type="number" id="lon" value="126.222222" step="0.000001"> (경도)<br>
이동 거리:
<input type="number" id="north" placeholder="북(+) 남(-) m"> m
<input type="number" id="east" placeholder="동(+) 서(-) m"> m
<button onclick="movePoint()">좌표 계산 및 마커 표시</button>
</div>
<div id="map"></div>
<script>
var mapContainer = document.getElementById('map');
var mapOption = {
center: new kakao.maps.LatLng(37.111111, 126.222222),
level: 5
};
var map = new kakao.maps.Map(mapContainer, mapOption);
// 기준 마커
var baseMarker = new kakao.maps.Marker({
position: map.getCenter()
});
baseMarker.setMap(map);
// 새 마커
var newMarker = null;
// 위도/경도 → 미터 변환 기준값
function metersPerDegLat(lat){
return 111132.954 - 559.822 * Math.cos(2 * lat * Math.PI / 180);
}
function metersPerDegLon(lat){
return 111412.84 * Math.cos(lat * Math.PI / 180);
}
function movePoint(){
var lat = parseFloat(document.getElementById('lat').value);
var lon = parseFloat(document.getElementById('lon').value);
var north = parseFloat(document.getElementById('north').value) || 0;
var east = parseFloat(document.getElementById('east').value) || 0;
var mPerLat = metersPerDegLat(lat);
var mPerLon = metersPerDegLon(lat);
var dLat = north / mPerLat;
var dLon = east / mPerLon;
var newLat = lat + dLat;
var newLon = lon + dLon;
alert("새 좌표: 위도 " + newLat.toFixed(9) + ", 경도 " + newLon.toFixed(9));
if(newMarker) newMarker.setMap(null);
newMarker = new kakao.maps.Marker({
position: new kakao.maps.LatLng(newLat, newLon),
map: map
});
// 지도 중심 이동
map.setCenter(new kakao.maps.LatLng(newLat, newLon));
}
</script>
</body>
</html>
댓글 없음:
댓글 쓰기