댓글 :이 반찬은 방금 HTML5를 배우기 시작했으며 이제 지리적 위치에 관심이 있습니다. 기본 맵 포지셔닝 기능은 Google MAP API와 함께 구현됩니다. 다음 단계는 주로 사용됩니다. 현재 지리적 위치를 얻고 Google Map API에 전화하여 현재 위치 정보를 얻으십시오.
이 반찬은 방금 HTML5를 배우기 시작했으며 이제 지리적 위치에 관심이 있으며 Google Map의 API를 결합하여 기본 맵 포지셔닝 기능을 구현합니다.1. 현재 지리적 위치를 얻으십시오
메소드 void getCurrentPosition (onsuccess, onerror, 옵션)을 호출하십시오.
onsuccess가 현재 위치 정보가 성공할 때 실행되는 콜백 함수 인 경우, OnError는 현재 위치 정보가 실패하면 실행되는 콜백 함수입니다. 옵션은 선택적인 친숙한 목록입니다. 두 번째 및 세 번째 매개 변수는 선택적 속성입니다.
onsuccess 콜백 함수에서 매개 변수 위치는 특정 위치 객체를 나타내고 현재 위치를 나타내는 데 사용됩니다. 다음 속성이 있습니다.
• 위도 : 현재 지리적 위치의 위도.
• 경도 : 현재 지리적 위치의 경도.
• 고도 : 현재 위치의 고도 (검색 할 수없는 경우 널).
• 정확도 : 획득 된 위도 및 경도의 정확도 (미터).
• 고도 : 획득 된 고도의 경도 (미터).
• 제목 : 장치의 방향. 전방 방향을 향한 시계 방향 회전 각도로 표시됩니다 (검색 할 수없는 경우 NULL).
• 속도 : 장치의 순방향 속도 (미터/초로 검색 할 수없는 경우 널).
• 타임 스탬프 : 지리적 위치 정보를 얻는 시간.
OnError 콜백 함수에서 오류 매개 변수가 사용됩니다. 다음 속성이 있습니다.
• 코드 : 다음 값의 오류 코드.
1. 사용자는 위치 서비스를 거부했습니다 (속성 값은 1).
2. 위치 정보를 얻을 수 없습니다 (속성 값은 2).
3. 정보 시간 초과 오류를 얻습니다 (속성 값은 3).
• 메시지 : 특정 오류 정보가 포함 된 문자열.
옵션 매개 변수에서 선택적 특성은 다음과 같습니다.
• ENABLEHAGACCURACY : 고정밀 지리적 지위 정보가 필요한지 여부.
• 시간 초과 : 시간 초과 시간을 밀리 초로 설정하십시오.
• 최대 : 캐시 지리 위치 정보의 유효한 시간 (밀리 초).
브라우저가 HTML5를 지원하여 지리적 위치 정보를 얻기 위해 HTML5를 지원하여 이전에 지원되지 않은 브라우저와 호환되는지 여부를 결정하려면 다음 코드를 작성해야합니다.
if (navigator.geolocation) {
// 현재 지리적 위치 정보를 얻습니다
navigator.geolocation.getCurrentPosition (onsuccess, onerror, 옵션);
} 또 다른 {
ALERT ( "브라우저는 지리적 위치 정보를 얻기 위해 HTML5를 지원하지 않습니다.");
}
2. 현재 위치 정보를 얻으려면 Google Map API에 전화하십시오.
먼저 페이지에서 Google Map API의 스크립트 파일을 참조해야합니다. 가져 오기 방법은 다음과 같습니다.
<script type = "text/javaScript"src = "http://maps.google.com/maps/api/js?sensor=false"> </script>
둘째, 맵 매개 변수를 설정하면 설정 메소드가 다음과 같습니다.
// Google지도에서 좌표 지점을 지정하고 좌표 지점의 수평 및 수직 좌표도 지정합니다.
var latlng = new Google.maps.latlng (coords.latitude, coords.longitude);
var myoptions = {
줌 : 14, // 배율을 설정합니다
센터 : latlng, // 맵의 중심점을 지정된 좌표 지점으로 설정
MapTypeid : google.maps.maptypeid.roadmap // 맵 유형을 지정합니다
};
마지막으로 맵을 만들고 페이지에 표시하면 생성 방법은 다음과 같습니다.
// 맵을 만들고 페이지 맵에 표시
var map = new google.maps.map (document.getElementById ( "map"), myoptions);
결국,이 예제의 모든 코드가 제시됩니다. 코드는 다음과 같습니다.
<! doctype html>
<html xmlns = "http://www.w3.org/1999/xhtml">
<헤드>
<meta http-equiv = "content-type"content = "text /html; charset = utf-8" />
<title> 현재 위치를 가져 와서 Google지도에 표시 </title>
<script type = "text/javaScript"src = "http://maps.google.com/maps/api/js?sensor=false"> </script>
<script type = "text/javaScript">
함수 init () {
if (navigator.geolocation) {
// 현재 지리적 위치를 얻습니다
navigator.geolocation.getCurrentPosition (함수 (위치) {
var coords = position.coords;
//console.log(Position);
// Google지도에서 좌표 지점을 지정하고 좌표 지점의 수평 및 수직 좌표도 지정합니다.
var latlng = new Google.maps.latlng (coords.latitude, coords.longitude);
var myoptions = {
줌 : 14, // 배율을 설정합니다
센터 : latlng, // 맵의 중심점을 지정된 좌표 지점으로 설정
MapTypeid : google.maps.maptypeid.roadmap // 맵 유형을 지정합니다
};
// 맵을 만들고 페이지 맵에 표시
var map = new google.maps.map (document.getElementById ( "map"), myoptions);
// 맵에서 마크를 만듭니다
var 마커 = 새로운 Google.maps.marker ({
위치 : latlng, // 위의 좌표를 클릭하십시오
지도 :지도 // 방금 만든지도 에서이 주석을 설정합니다.
});
// 태그 프롬프트 창
var infowindow = new Google.maps.infowindow ({
내용 : "현재 위치 : <br/> long :" + latlng.lat () + "<br/> dimension :" + latlng.lng () // 프롬프트 양식의 메시지 메시지
});
// 프롬프트 창을 엽니 다
Infowindow.open (지도, 마커);
},
함수 (오류) {
// 처리 오류
스위치 (error.code) {
case 1:
경고 ( "위치 서비스 거부");
부서지다;
case 2:
경고 ( "위치 정보를 당분간 얻을 수 없습니다.");
부서지다;
사례 3 :
경고 ( "정보 시간 초과 가져 오기");
부서지다;
기본:
경고 ( "알 수없는 오류");
부서지다;
}
});
} 또 다른 {
ALERT ( "브라우저는 지리적 위치 정보를 얻기 위해 HTML5를 지원하지 않습니다.");
}
}
</스크립트>
</head>
<body>
<div> </div>
</body>
</html>