Android/mapTest.html at master · Gungduk/Android · 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
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>네이버 지도 API</title>
	<script type="text/javascript" src="https://openapi.map.naver.com/openapi/v3/maps.js?clientId=sltpLBRnYuvswKLpTftK&submodules=geocoder"></script>
</head>
<body>
	<h1>Naver Map Test</h1>

	<div id="map" style="width:100%;height:400px;"></div>
	<script>
		var map = new naver.maps.Map('map');

	 //   	var map = new naver.maps.Map('map', {
  //   	mapTypeId: naver.maps.MapTypeId.HYBRID
		// }); //이 지도 유형 좋은 것 같기도!

		var Gyeongbok_plc = new naver.maps.LatLng(37.579813, 126.976998);

		map.setCenter(Gyeongbok_plc); // 중심 좌표 이동
		map.setZoom(13);     // 줌 레벨 변경

		//마커
		var Gyenongbok_marker = new naver.maps.Marker({
		    position: new naver.maps.LatLng(37.579813, 126.976998),
		    map: map
		});


		var startLoop;

		var nowHere_marker; //현 위치 마커


/************https://chongmoa.com:45183/html/3015 현재 위치 불러오기*************/
  window.onload=function(){
    //위치정보를 확인할 수 있는 브라우저인지 확인
    if(navigator.geolocation == undefined){
        alert("위치 정보 기능을 지원하지 않습니다!")
        return;
    }
 }


// function loopData(){

// 	for(var i=0; i<10; i++){

// 		showData();
// 	}
// }


 //현재 위치 정보 알아보는 메소드
 function showData(){


	// checkAvailability();

	//nowHere_marker.setMap(null);//이전 마커 없애기.

	if(navigator.geolocation){

		//nowHere_marker.setMap(null);//이전 마커 없애기.

        navigator.geolocation.getCurrentPosition(success, fail); //현재 위치 정보를 조사하고 성공 실패 했을시 호출되는 함수 설정
	}else{
		alert('브라우저가 geolocation을 지원하지 않습니다!.');
	}
	// setTimeout(showData, 1000);
}

 function loopData(){

 startLoop = setInterval(showData, 500); //0.5초 간격

 }

 function stopData(){

 	clearInterval(startLoop);
 }


 function success(position) { //성공시

	if(nowHere_marker != null){
		nowHere_marker.setMap(null);//이전 마커 없애기.
	}

    log("위치정보 확인 성공!");
    for(var property in position.coords) { //반복문 돌면서 출력
        log("Key 값:"+property+" 정보:"+position.coords[property]);
    }

    var lat=position.coords["latitude"];
    var lon=position.coords["longitude"];

//     var url="http://maps.googleapis.com/maps/api/geocode/json?latlng="+lat+","+lon+"&sensor=false";
     //location.href = url;//페이지 이동하기

	var nowHere = new naver.maps.LatLng(lat,lon);

	map.setCenter(nowHere); // 중심 좌표 이동
	map.setZoom(13);     // 줌 레벨 변경

	// nowHere_marker = new naver.maps.Marker({
	// 	position: new naver.maps.LatLng(lat, lon),
	// 	map: map
	// });

	nowHere_marker = new naver.maps.Marker({
		position: new naver.maps.LatLng(lat, lon),
		map: map,
		icon: {
			url: './img/test2.png',
			// size: new naver.maps.Size(35, 36),
			// origin: new naver.maps.Point(0, 0),
        	// anchor: new naver.maps.Point(25, 26)
		}
	});


	//마커 없어지는 것 테스트!
	//nowHere_marker.setMap(null);


	//ajax 통신
	var object = new Object();
	object.lat = lat;
	object.lon = lon;

	var jsonData = JSON.stringify(object);


	$.ajax({
		url: "http://localhost:8182/test1/map.do",
		type: 'post', //post가 맞을까?
		contentType: "application/json;charset=UTF-8",
		data: jsonData,
		success:function(){
			alert('위치 값(위도, 경도)을 저장하였습니다.');
		},
		error:function(){
			alert('위치 값을 저장하는 데 실패하였습니다.');
		}
	});


 }

 //실패시
 function fail(err){
    switch (err.code){
        case err.PERMISSION_DENIED:
            msg = "사용자 거부";
        break;

        case err.PERMISSION_UNAVAILABLE:
            msg = "지리정보를 얻을 수 없음";
        break;

        case err.TIMEOUT:
            msg = "시간초과";
        break;

        case err.UNKNOWN_ERROR:
            msg = "알 수 없는 오류 발생";
        break;
    }
        log(msg);
 }

 function log(msg){
    var console = document.getElementById("console");
    console.innerHTML += msg+"<br/>";
 }
</script>

<!--  <button onclick="showData()">현재 위치 확인</button> -->
<button onclick="loopData()">실시간 위치 확인</button>
<button onclick="stopData()">위치 그만 보기</button>

<div id="console" style="width:500px; border:5px; font-size:20px"></div>


</body>
</html>