https://m.blog.naver.com/chammaja1/100194907067
위도(latitude)와 경도(longitude)
위도(latitude)와 경도(longitude) 지도를 볼 때 가장 기본이 되는 지리좌표계 - 위도와 경도에 대해서 알...
blog.naver.com
<!DOCTYPE html>
<html lang="en">
<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">
<title>나의위치</title>
</head>
<body>
<button onclick="MyPosition()">나의 현재위치</button><p>
<div id="result"></div>
<script>
function MyPosition() {
if(navigator.geolocation)
{
navigator.geolocation.getCurrentPosition(CurPosition)
}
function CurPosition(pos) {
var lat = pos.coords.latitude; //위도
var lng = pos.coords.latitude; //경도
document.getElementById("result").innerHTML = "위도 :" + lat + "경도 : " + lng;
}
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<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">
<title>나의위치</title>
</head>
<body>
<button onclick="MyPosition()">나의 현재위치</button><p>
<div id="result"></div>
<script>
function MyPosition() {
if(navigator.geolocation)
{
navigator.geolocation.getCurrentPosition(CurPosition, errorCallback)
}
function CurPosition(pos) {
var lat = pos.coords.latitude; //위도
var lng = pos.coords.latitude; //경도
document.getElementById("result").innerHTML = "위도 :" + lat + "경도 : " + lng;
}
function errorCallback(err) {
switch (err.code)
{
case err.PERMISSION_DENIED: //권한 차단?
document.getElementById("result").innerHTML = "현재위치에 대한 권한이 없습니다.";
break;
case err.POSITION_UNAVAILABLE:
document.getElementById("result").innerHTML = "현재 위치 정보를 구할 수 없습니다.";
break;
case err.TIMEOUT:
document.getElementById("result").innerHTML = "시간 제한을 초과했습니다.";
break;
}
}
}
</script>
</body>
</html>
하지만 지금까지는 정적 position이다.
동적으로 변경하고 싶다면 watchPosition함수 사용
return값을 받는 이유는 계속지속적으로 값을 받아야 되기 때문이다.
실시간으로 가져오기
<!DOCTYPE html>
<html lang="en">
<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">
<title>길찾기</title>
</head>
<body>
<button onclick="startPosition()">위치 추적 시작</button><p>
<div id="result"></div>
<script>
var watcherID;
function startPosition() {
if(navigator.geolocation)
{
var options = {timeout:1000, enableHighAccuracy:true}
watcherID = navigator.geolocation.watchPosition(CurPosition, errorCallback,options)
}
function CurPosition(pos) {
var lat = pos.coords.latitude; //위도
var lng = pos.coords.latitude; //경도
document.getElementById("result").innerHTML = "위도 :" + lat + "경도 : " + lng;
}
function errorCallback(err) {
switch (err.code)
{
case err.PERMISSION_DENIED: //권한 차단?
document.getElementById("result").innerHTML = "현재위치에 대한 권한이 없습니다.";
break;
case err.POSITION_UNAVAILABLE:
document.getElementById("result").innerHTML = "현재 위치 정보를 구할 수 없습니다.";
break;
case err.TIMEOUT:
document.getElementById("result").innerHTML = "시간 제한을 초과했습니다.";
break;
}
}
}
</script>
</body>
</html>
이부분은 위치를 이동하면서 테스트 해봐야 됨
구글 위치정보 API 사용
google API callback error발생 수정 필요....
<!DOCTYPE html>
<html lang="en">
<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">
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=startPosition&v=weekly"></script>
<title>길찾기</title>
</head>
<body>
<button onclick="startPosition()">나의 현재위치</button><p>
<div id="result"></div>
<div id = "map" style="height: 600px; width: 500px;"></div>
<script>
var watcherID;
var markerIcon = new google.maps.MarkerImage("marker.jpg");
//var markerIcon = new google.maps.markerIcon("marker.jpg");
function startPosition() {
if(navigator.geolocation)
{
var options = {timeout:1000, enableHighAccuracy:true};
watcherID = navigator.geolocation.watchPosition(CurPosition, errorCallback, options);
}
function CurPosition(pos) {
var lat = pos.coords.latitude; //위도
var lng = pos.coords.latitude; //경도
document.getElementById("result").innerHTML = "위도 :" + lat + "경도 : " + lng;
var latlng = new google.maps.LatLng(lat,lng);
var options = {
zoom: 15,
center: latlng,
//mapTypeId: google.maps.MapTypeId.roadmap
mapTypeId: google.maps.MapTypeId.ROADMAP
//mapTypeId:google.maps.MapTypeId.HYBRID
};
var map = new google.maps.Map(
document.getElementById("map"),
options
);
var marker = new google.maps.Marker(
{
map : map,
icon: markerIcon,
title: "현재 위치",
position: latlng
}
)
};
function errorCallback(err) {
switch (err.code)
{
case err.PERMISSION_DENIED: //권한 차단?
document.getElementById("result").innerHTML = "현재위치에 대한 권한이 없습니다.";
break;
case err.POSITION_UNAVAILABLE:
document.getElementById("result").innerHTML = "현재 위치 정보를 구할 수 없습니다.";
break;
case err.TIMEOUT:
document.getElementById("result").innerHTML = "시간 제한을 초과했습니다.";
break;
}
}
}
</script>
</body>
</html>
error 원인 (1)
위도와 경도를 모두 위도를 썼다...
경도를
var lng = pos.coords.longitude; //경도로 변경
error원인 (2)
callback=startPosition (나는callback 함수로 startPosition을 작성한 것이 아니라 호출함수로 작성함...)
https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=startPosition&v=weekly
https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&v=weekly사실 원본의 google API는 callback=initMap 이다. 나는 initMap이라는 함수가 없어서 내가 작성한 startPosition() 을 initMap()으로 변경해서 APIKEY 에 대체하고 싶었던 것이다.
해결방법 (1)
https://coderanch.com/t/733518/languages/message-initMap-function
message: initMap is not a function (HTML Pages with CSS and JavaScript forum at Coderanch)
posted 2 years ago I have identified where problem is but don't know what the exact reason is. First, I created a new CSHTML page and tried. The same result.Test disappeared and Map did not get displayed. Next, instead of using the existing css (namely sit
coderanch.com
해결방법 (2)
callback을 하지 않고 API KEY 에서 callback=startPosition 을 제거
<!DOCTYPE html>
<html lang="en">
<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">
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&v=weekly"></script>
<title>길찾기</title>
</head>
<body>
<button onclick="startPosition()">나의 현재위치</button><p>
<div id="result"></div>
<div id = "map" style="height: 600px; width: 500px;"></div>
<script>
var watcherID;
var markerIcon = new google.maps.MarkerImage("marker.jpg");
//var markerIcon = new google.maps.markerIcon("marker.jpg");
function startPosition() {
if(navigator.geolocation)
{
var options = {timeout:1000, enableHighAccuracy:true};
watcherID = navigator.geolocation.watchPosition(CurPosition, errorCallback, options);
}
function CurPosition(pos) {
var lat = pos.coords.latitude; //위도
var lng = pos.coords.longitude; //경도
document.getElementById("result").innerHTML = "위도 :" + lat + "경도 : " + lng;
var latlng = new google.maps.LatLng(lat,lng);
var options = {
zoom: 15,
center: latlng,
//mapTypeId: google.maps.MapTypeId.roadmap
mapTypeId: google.maps.MapTypeId.ROADMAP
//mapTypeId:google.maps.MapTypeId.HYBRID
};
var map = new google.maps.Map(
document.getElementById("map"),
options
);
var marker = new google.maps.Marker(
{
map : map,
icon: markerIcon,
title: "현재 위치",
position: latlng
}
)
};
function errorCallback(err) {
switch (err.code)
{
case err.PERMISSION_DENIED: //권한 차단?
document.getElementById("result").innerHTML = "현재위치에 대한 권한이 없습니다.";
break;
case err.POSITION_UNAVAILABLE:
document.getElementById("result").innerHTML = "현재 위치 정보를 구할 수 없습니다.";
break;
case err.TIMEOUT:
document.getElementById("result").innerHTML = "시간 제한을 초과했습니다.";
break;
}
}
}
</script>
</body>
</html>
실행결과
예전과 달리 나의 위도/ 위도 > 위도 /경도 로 변경 했고 api에있는 callback하지도 않는 함수를 제거했기에 console에 에러도 해결했다!!
