Web_Application/cctv_state.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
131
<!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: 1500px; height:800px;"></div>
  <script>
    var position = new naver.maps.LatLng(37.515105, 126.996357); //서울역 현재위치 default값
    var position1 = new naver.maps.LatLng(37.522583, 126.961311); // 세종대로 사거리 CCTV
    var position2 = new naver.maps.LatLng(37.515105, 126.996357); // 청계2가 CCTV
    var map = new naver.maps.Map('map', {
      center: new naver.maps.LatLng(37.5163304, 126.9793625),
      zoom: 13,
      mapTypeId: naver.maps.MapTypeId.NORMAL
    });

    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 loc_list = [[37.535254, 126.9743843], [37.522583, 126.961311], [37.515105, 126.996357], [37.5334844, 126.9888039],
    [37.5072073, 127.008545], [37.5442377, 126.953785], [37.5291282, 127.0339508], [37.522185, 127.0188446], [37.5191897, 127.028801],
[37.5156496, 127.0195313], [37.5108839, 127.0205613], [37.4989001, 126.985199],
[37.5123817, 126.9570465], [37.5145604, 126.9302674], [37.5100669, 126.9100113],
[37.508569, 126.8911286], [37.5035305, 127.0497437]]
    for (var i = 0; i<loc_list.length; i++) {
      var marker_cctv = {
      position: new naver.maps.LatLng(loc_list[i][0], loc_list[i][1]),
      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_cctv_make = new naver.maps.Marker(marker_cctv);
    }

    var marker_cctv1 = new naver.maps.Marker(markerOptions1);
    var marker_cctv2 = new naver.maps.Marker(markerOptions2);
    var infowindow = new naver.maps.InfoWindow();

    naver.maps.Event.addListener(map, 'click', getClickHandler('in'));

    function getClickHandler(seq) {
        return function (e) {
          console.log(seq);
          console.log(e);
        }
    }
  </script>

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

</html>