ABCDEFGHIJKLMNOPQRSTUVWXYZ
1
<!DOCTYPE html>
2
<html>
3
<head>
4
<script type="javascript" charset="UTF-8" src="/script.js"></script>
5
<title>캐드 TM좌표→카카오지도에 표시</title>
6
<style>
7
html, body { height: 99%; }
8
#container {overflow:hidden;height:90%;position:relative;}
9
#mapWrapper {width:100%;height:100%;z-index:1;}
10
#rvWrapper {width:50%;height:100%;top:0;right:0;position:absolute;z-index:0;}
11
#container.view_roadview #mapWrapper {width: 50%;}
12
#roadviewControl {position:absolute;top:5px;left:5px;width:42px;height:42px;z-index: 1;cursor: pointer; background: url(https://t1.daumcdn.net/localimg/localimages/07/2018/pc/common/img_search.png) 0 -450px no-repeat;}
13
#roadviewControl.active {background-position:0 -350px;}
14
#close {position: absolute;padding: 4px;top: 5px;left: 5px;cursor: pointer;background: #fff;border-radius: 4px;border: 1px solid #c8c8c8;box-shadow: 0px 1px #888;}
15
#close .img {display: block;background: url(https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/rv_close.png) no-repeat;width: 14px;height: 14px;}
16
</style>
17
</head>
18
<body>
19
<div id="container">
20
<div id="rvWrapper">
21
<div id="roadview" style="width:100%;height:100%;"> </div> <!-- 로드뷰를 표시할 div 입니다 -->
22
<div id="close" title="로드뷰닫기" onclick="closeRoadview()"> <span class="img"></span> </div>
23
 </div>
24
<div id="mapWrapper">
25
<div id="map" style="width:100%;height:100%;"> </div> <!-- 지도를 표시할 div 입니다 -->
26
<div id="roadviewControl" onclick="setRoadviewRoad()"> </div>
27
 </div>
28
</div>
29
<Style type="text/css">
30
.bAddr {padding:5px;text-overflow: ellipsis;overflow: hidden;white-space: nowrap;}
31
</Style>
32
<script type="text/javascript" src="http://dapi.kakao.com/v2/maps/sdk.js?appkey=c2d2fc7d6d8839952c6357aaf0dfc299&libraries=services"> </script>
33
<script>
34
var overlayOn = false, // 지도 위에 로드뷰 오버레이가 추가된 상태를 가지고 있을 변수
35
container = document.getElementById('container'), // 지도와 로드뷰를 감싸고 있는 div 입니다
36
mapWrapper = document.getElementById('mapWrapper'), // 지도를 감싸고 있는 div 입니다
37
mapContainer = document.getElementById('map'), // 지도를 표시할 div 입니다
38
rvContainer = document.getElementById('roadview'); //로드뷰를 표시할 div 입니다
39
var mapCenter = new kakao.maps.LatLng(36.8084425777295, 127.051223751343),
40
mapOption = {
41
center: mapCenter, // 지도의 중심좌표
42
level: 3, // 지도의 확대 레벨
43
mapTypeId: daum.maps.MapTypeId.HYBRID
44
 };
45
var map = new daum.maps.Map(mapContainer, mapOption);
46
var mapTypeControl = new daum.maps.MapTypeControl();
47
map.addControl(mapTypeControl, daum.maps.ControlPosition.TOPRIGHT);
48
var zoomControl = new daum.maps.ZoomControl();
49
map.addControl(zoomControl, daum.maps.ControlPosition.RIGHT);
50
customOverlay = new kakao.maps.CustomOverlay({}),
51
infowindow = new kakao.maps.InfoWindow({removable: true});
52
var rv = new kakao.maps.Roadview(rvContainer);
53
var rvClient = new kakao.maps.RoadviewClient();
54
kakao.maps.event.addListener(rv, 'position_changed', function() {
55
var rvPosition = rv.getPosition();
56
map.setCenter(rvPosition);
57
if(overlayOn) {
58
marker0.setPosition(rvPosition); } });
59
var markImage = new kakao.maps.MarkerImage(
60
'https://t1.daumcdn.net/localimg/localimages/07/2018/pc/roadview_minimap_wk_2018.png',
61
new kakao.maps.Size(26, 46),
62
 {
63
spriteSize: new kakao.maps.Size(1666, 168),
64
spriteOrigin: new kakao.maps.Point(705, 114),
65
offset: new kakao.maps.Point(13, 46)
66
 }
67
);
68
var marker0 = new kakao.maps.Marker({ image : markImage, position: mapCenter, draggable: true});
69
kakao.maps.event.addListener(marker0, 'dragend', function(mouseEvent) { var position = marker0.getPosition(); toggleRoadview(position);});
70
kakao.maps.event.addListener(map, 'click', function(mouseEvent){ if(!overlayOn) { return; } var position = mouseEvent.latLng; marker0.setPosition(position); toggleRoadview(position);});
71
function toggleRoadview(position){ rvClient.getNearestPanoId(position, 50, function(panoId) { if (panoId === null) { toggleMapWrapper(true, position); } else { toggleMapWrapper(false, position); rv.setPanoId(panoId, position); } }); }
72
function toggleMapWrapper(active, position) { if (active) { container.className = ''; map.relayout(); map.setCenter(position);
73
} else { if (container.className.indexOf('view_roadview') === -1) { container.className = 'view_roadview'; map.relayout(); map.setCenter(position); } } }
74
function toggleOverlay(active) { if (active) { overlayOn = true; map.addOverlayMapTypeId(kakao.maps.MapTypeId.ROADVIEW); marker0.setMap(map); marker0.setPosition(map.getCenter()); toggleRoadview(map.getCenter());
75
} else { overlayOn = false; map.removeOverlayMapTypeId(kakao.maps.MapTypeId.ROADVIEW); marker0.setMap(null); } }
76
function setRoadviewRoad() { var control = document.getElementById('roadviewControl'); if (control.className.indexOf('active') === -1) { control.className = 'active'; toggleOverlay(true);
77
} else { control.className = ''; toggleOverlay(false); } }
78
function closeRoadview() { var position = marker0.getPosition(); toggleMapWrapper(true, position); }
79
var pipeline1 = [
80
new daum.maps.LatLng(36.8111477651873,127.046742646617),
81
new daum.maps.LatLng(36.8111440162442,127.055708037301),
82
new daum.maps.LatLng(36.8057373902716,127.055704225772),
83
new daum.maps.LatLng(36.8057411384961,127.046739465385),
84
new daum.maps.LatLng(36.8111477651873,127.046742646617)
85
];
86
var polyline1 = new daum.maps.Polyline({
87
path: pipeline1,
88
strokeWeight: 1,
89
strokeColor: '#FF00FF',
90
strokeOpacity: 1,
91
strokeStyle: 'solid'
92
});
93
polyline1.setMap(map);
94
daum.maps.event.addListener(polyline1, 'click', function(mouseEvent) {
95
var content = 'Layer : ljdkej'+'<br>' + '길이 2,800.00m' ;
96
infowindow.setContent(content);
97
infowindow.setPosition(mouseEvent.latLng);
98
infowindow.setMap(map);
99
});
100