HTML5의 Geolocation을 사용하여 지리적 위치를 얻고 Google Map API를 호출하여 Google Map_html5 튜토리얼 기술을 찾습니다.

이 반찬은 이제 막 HTML5를 배우기 시작했는데, 이제는 Geolocation에 관심이 많아 기본적인 지도 위치 지정 기능을 구현하기 위해 Google Map의 API와 결합했습니다.
1. 현재 지리적 위치를 가져옵니다.
void getCurrentPosition(onSuccess, onError, options); 메서드를 호출합니다.
그 중 onSuccess는 현재 위치 정보 획득에 성공했을 때 실행되는 콜백 함수이고, onError는 현재 위치 정보 획득에 실패했을 때 실행되는 콜백 함수이며, options은 몇 가지 선택적 친숙 목록입니다. 두 번째 및 세 번째 매개변수는 선택적 속성입니다.
onSuccess 콜백 함수에서는 특정 위치 객체를 나타내며 현재 위치를 나타내는 position 매개변수를 사용합니다. 여기에는 다음과 같은 속성이 있습니다.
•위도: 현재 지리적 위치의 위도입니다.
•경도: 현재 지리적 위치의 경도입니다.
•altitude: 현재 위치의 고도(얻을 수 없는 경우 null).
•정확도: 얻은 위도 및 경도의 정확도(미터 단위)입니다.
•altitudeAccurancy: 획득한 고도의 경도(미터 단위)입니다.
•방향: 장치의 진행 방향입니다. 물체의 방향을 향한 시계방향 회전 각도로 표현됩니다(얻을 수 없는 경우 null).
•speed: 장치의 전진 속도(미터/초 단위, 얻을 수 없는 경우 null).
•타임스탬프: 지리적 위치 정보를 획득한 시간입니다.

onError 콜백 함수에서는 error 매개변수가 사용됩니다. 여기에는 다음과 같은 속성이 있습니다.
•code: 오류 코드, 다음 값 포함.
1. 사용자가 위치 서비스를 거부했습니다(속성 값은 1).
2. 위치 정보를 얻을 수 없습니다(속성 값은 2).
3. 정보 획득 중 시간 초과 오류가 발생했습니다. ).
•메시지: 특정 오류 정보가 포함된 문자열입니다.

options 파라미터의 선택 속성은 다음과 같습니다.
•enableHighAccuracy: 고정밀 지리적 위치 정보 요구 여부.
•timeout: 타임아웃을 설정합니다(단위: 밀리초).
•maximumAge: 지리적 위치 정보를 캐싱하는 데 유효한 시간(단위: 밀리초).
지리적 위치 정보를 얻기 위해 브라우저가 HTML5를 지원하는지 확인하고 이를 지원하지 않는 이전 브라우저와 호환되도록 하려면 다음 코드를 작성해야 합니다.

코드 복사

코드는 다음과 같습니다.

if(navigator.geolocation) {
//현재 지리적 위치 정보 가져오기
navigator.geolocation.getCurrentPosition(onSuccess, onError, options);
} else {
alert("브라우저는 지리적 위치를 가져오는 HTML5를 지원하지 않습니다. 정보." ; 아래와 같습니다.

코드 복사


코드는 다음과 같습니다.

두 번째로 지도 매개변수를 설정하고 설정 방법 아래와 같습니다.

코드 복사


코드는 다음과 같습니다.

//좌표를 지정하세요. Google 지도 점, 좌표점의 가로 좌표와 세로 좌표를 동시에 지정 var latlng = new google.maps.LatLng(coords.latitude, coords.longitude) var myOptions = { zoom : 14, //배율 설정

center: latlng, //지도 중심점을 지정된 좌표점으로 설정

mapTypeId: google.maps.MapTypeId.ROADMAP //지도 유형 지정

} ;


마지막으로 지도를 생성하고 페이지에 표시합니다. 생성 방법은 다음과 같습니다

코드 복사


코드는 다음과 같습니다.

//지도를 생성하고 페이지 맵에 표시합니다var map = new google.maps.Map(document.getElementById ("map"), myOptions);

마지막으로 이 예제의 모든 코드를 제시합니다. 코드는 아래와 같습니다.

코드 복사


코드는 다음과 같습니다.

http-equiv="Content-Type" content="text/html; charset=utf-8" />
;script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false">
body onload ="init()">