Web_Application/start_page_map.html at master · DRAS-Detecting-Road-Abnormal-situations/Web_Application · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
<!DOCTYPE html>
<html>
  <head>
    <title>map</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
	  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <link href="resources/css/axure_rp_page.css" type="text/css" rel="stylesheet"/>
    <link href="data/styles.css" type="text/css" rel="stylesheet"/>
    <link href="files/map3/styles.css" type="text/css" rel="stylesheet"/>
    <script src="resources/scripts/jquery-3.2.1.min.js"></script>
    <script src="resources/scripts/axure/axQuery.js"></script>
    <script src="resources/scripts/axure/globals.js"></script>
    <script src="resources/scripts/axutils.js"></script>
    <script src="resources/scripts/axure/annotation.js"></script>
    <script src="resources/scripts/axure/axQuery.std.js"></script>
    <script src="resources/scripts/axure/doc.js"></script>
    <script src="resources/scripts/messagecenter.js"></script>
    <script src="resources/scripts/axure/events.js"></script>
    <script src="resources/scripts/axure/recording.js"></script>
    <script src="resources/scripts/axure/action.js"></script>
    <script src="resources/scripts/axure/expr.js"></script>
    <script src="resources/scripts/axure/geometry.js"></script>
    <script src="resources/scripts/axure/flyout.js"></script>
    <script src="resources/scripts/axure/model.js"></script>
    <script src="resources/scripts/axure/repeater.js"></script>
    <script src="resources/scripts/axure/sto.js"></script>
    <script src="resources/scripts/axure/utils.temp.js"></script>
    <script src="resources/scripts/axure/variables.js"></script>
    <script src="resources/scripts/axure/drag.js"></script>
    <script src="resources/scripts/axure/move.js"></script>
    <script src="resources/scripts/axure/visibility.js"></script>
    <script src="resources/scripts/axure/style.js"></script>
    <script src="resources/scripts/axure/adaptive.js"></script>
    <script src="resources/scripts/axure/tree.js"></script>
    <script src="resources/scripts/axure/init.temp.js"></script>
    <script src="resources/scripts/axure/legacy.js"></script>
    <script src="resources/scripts/axure/viewer.js"></script>
    <script src="resources/scripts/axure/math.js"></script>
    <script src="resources/scripts/axure/jquery.nicescroll.min.js"></script>
    <script src="data/document.js"></script>
    <script src="files/map3/data.js"></script>
    <script type="text/javascript" src="https://openapi.map.naver.com/openapi/v3/maps.js?ncpClientId=rpbl1d7siz">
      $axure.utils.getTransparentGifPath = function() { return 'resources/images/transparent.gif'; };
      $axure.utils.getOtherPath = function() { return 'resources/Other.html'; };
      $axure.utils.getReloadPath = function() { return 'resources/reload.html'; };
    </script>
	<style>
	body{margin:0px;}
	</style>
  </head>
  <body>
    <div id="map" style="width: 1395px; height:595px;"></div>
	<script>
		var position = new naver.maps.LatLng(37.710507,127.0451913); //서울역 현재위치 default값
    var position_car = new naver.maps.LatLng(37.710507,127.0451913);
		var position1 = new naver.maps.LatLng(37.570226, 126.976920); // 세종대로 사거리 CCTV
    var position2 = new naver.maps.LatLng(37.569834, 127.002028); // 청계2가 CCTV

		var map = new naver.maps.Map('map', {
			center: position,
			zoom: 14,
			mapTypeId: naver.maps.MapTypeId.NORMAL
		});

var infowindow = new naver.maps.InfoWindow();
function reset(){
		var markerOptions = {
			position: position_car,
			map: map,
			icon: {
				url: './images/CAR1.png',
				size: new naver.maps.Size(21, 38),
				origin: new naver.maps.Point(0, 0),
				anchor: new naver.maps.Point(11, 35)
			}
		};
		var markerOptions1 = {
			position: position1,
			map: map,
			icon: {
				url: './images/CCTV1.png',
				size: new naver.maps.Size(29, 29),
				origin: new naver.maps.Point(0, 0),
				anchor: new naver.maps.Point(11, 35)
			}
		};
		var markerOptions2 = {
			position: position2,
			map: map,
			icon: {
				url: './images/CCTV1.png',
				size: new naver.maps.Size(29, 29),
				origin: new naver.maps.Point(0, 0),
				anchor: new naver.maps.Point(11, 35)
			}
		};

		var marker_car = new naver.maps.Marker(markerOptions);
		var marker_cctv1 = new naver.maps.Marker(markerOptions1);
		var marker_cctv2 = new naver.maps.Marker(markerOptions2);
}

function onSuccessGeolocation(position) {
    var location = new naver.maps.LatLng(position.coords.latitude,
                                         position.coords.longitude);
    map.setCenter(location); // 얻은 좌표를 지도의 중심으로 설정합니다.
    map.setZoom(14); // 지도의 줌 레벨을 변경합니다.
    position_car = location;
    reset();
}

function onErrorGeolocation() {
    var center = map.getCenter();
    infowindow.open(map, center);
}

$(window).on("load", function() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(onSuccessGeolocation, onErrorGeolocation);
    } else {
        var center = map.getCenter();
        infowindow.open(map, center);
    }
});

	</script>
    <script src="resources/scripts/axure/ios.js"></script>
  </body>
</html>