-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathmapping.html
114 lines (96 loc) · 3.45 KB
/
mapping.html
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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>GeoJSON 데이터 레이어 표시하기</title>
<!-- <script src="../../docs/js/jquery-1.9.1.js"></script> -->
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<!-- <script type="text/javascript" src="../../docs/js/examples-base.js"></script> -->
<!-- <script type="text/javascript" src="../../docs/js/highlight.min.js"></script> -->
<script type="text/javascript" src="https://openapi.map.naver.com/openapi/v3/maps.js?ncpClientId=bggzngmwwq"></script>
<!-- <link rel="stylesheet" type="text/css" href="../../docs/css/examples-base.css" /> -->
</head>
<body>
<!-- @category DataLayer -->
<div id="wrap" class="section">
<!-- <h2>GeoJSON 데이터 레이어 표시하기</h2> -->
<!-- <p>GeoJSON 데이터를 지도에 표시하는 예제입니다. 이 예제는 jQuery 구문을 포함하고 있습니다.</p> -->
<div id="map" style="width:60%;height:900px;"></div>
<code id="snippet" class="snippet"></code>
</div>
<script id="code">
var map = new naver.maps.Map(document.getElementById('map'), {
zoom: 17,
mapTypeId: 'normal',
center: new naver.maps.LatLng(37.3586524, 127.1060678)
// center: new naver.maps.LatLng(37.40231, 127.10318)
});
map.setMapTypeId(naver.maps.MapTypeId.SATELLITE);
naver.maps.Event.once(map, 'init_stylemap', function () {
$.ajax({
type: 'GET',
url: "https://kimth1757.github.io/data/trajectory.json",
dataType: 'json',
// async: 'false',
success: startDataLayer,
error:function(request,status,error){
alert("code = "+ request.status + " message = " + request.responseText + " error = " + error); // 실패 시 처리
},
// complete: function(){
// alert(window.location);
// alert('redirect!!');
// window.location.href = "http://127.0.0.1/test";
// }
});
});
var polyline = new naver.maps.Polyline({
map: map,
path: [
new naver.maps.LatLng(37.40231, 127.10318),
new naver.maps.LatLng(37.40531, 127.10318)
],
clickable: true,
strokeColor: "rgb(0, 255, 0)", //'#5347AA',
strokeStyle: 'shortdash',
strokeOpacity: 0.8,
strokeWeight: 3
});
function startDataLayer(geojson) {
//geojson.info.
map.data.addGeoJson(geojson);
map.data.setStyle(function(feature) {
var color = 'green';
if (feature.getProperty('isColorful')) {
color = feature.getProperty('color');
}
return {
fillColor: color,
strokeColor: color,
strokeWeight: 5,
icon: null
};
});
// map.data.addListener('click', function(e) {
// e.feature.setProperty('isColorful', true);
// });
// map.data.addListener('dblclick', function(e) {
// var bounds = e.feature.getBounds();
// if (bounds) {
// map.panToBounds(bounds);
// }
// });
// map.data.addListener('mouseover', function(e) {
// map.data.overrideStyle(e.feature, {
// strokeWeight: 8,
// icon: HOME_PATH +'/img/example/pin_spot.png'
// });
// });
// map.data.addListener('mouseout', function(e) {
// map.data.revertStyle();
// });
}
</script>
</body>
</html>