의견 :이 기사는 주로 지리적 위치를 얻기 위해 HTML5 코드 사용을 소개합니다. 특정 구현 코드는 다음과 같습니다. 스크린 샷이 첨부됩니다. 필요한 친구는 그것을 참조 할 수 있습니다.
/**
* 다음은 지리적 위치를 얻는 HTML5 코드입니다.
*/
함수 getLocation () {
// 브라우저가 지리적 위치 획득을 지원하는지 확인하십시오
if (navigator.geolocation) {
// 지리적 위치 획득을 지원하는 경우 ShowPosition ()을 성공적으로 호출하고 실패하면 샤워러를 호출합니다.
// Alert ( "위치를 얻기 위해 노력합니다 ...");
var config = {enablehighaccuracy : true, timeout : 5000, 최대 : 30000};
navigator.geolocation.getCurrentPosition (showposition, 샤워러, 구성);
} 또 다른 {
// Alert ( "이 브라우저에서는 지리적 위치가 지원되지 않습니다.");
ALERT ( "위치 실패, 사용자가 위치 액세스 장애인");
}
}
/**
* 주소 위치를 성공적으로 가져옵니다
*/
함수 showposition (위치) {
// 위도와 경도를 얻습니다
var x = position.coords.latitude;
var y = position.coords.longitude;
// Baidu Geocoding API를 구성합니다
var url = "http://api.map.baidu.com/geocoder/v2/?ak=c93b5178d7a8ebdb830b9b557abce78b" +
"& 콜백 = renderreverse" +
"& location =" + x + "," + y +
"& output = json" +
"& pois = 0";
$ .ajax ({
유형 : "get",
데이터 유형 : "JSONP",
URL : URL,
성공 : 기능 (JSON) {
if (json == null || typeof (json) == "undefined") {
반품;
}
if (json.status! = "0") {
반품;
}
setAddress (json.result.addresscomponent);
},
오류 : 함수 (xmlhttprequest, textstatus, errorthrown) {
Alert ( "[x :" + x + ", y :" + y + "] 주소 위치를 검색하지 못했습니다. 수동으로 주소를 선택하십시오");
}
});
}
/**
* 주소 위치를 얻지 못했습니다 [아직 처리되지 않았습니다]
*/
기능 샤워러 (오류) {
스위치 (error.code) {
case error.permission_denied :
ALERT ( "위치 실패, 사용자는 지리적 위치 요청을 거부합니다");
//x.innerhtml = "사용자는 지리적 위치 요청을 거부했습니다. [사용자 거부 요청 지리적 위치]"
부서지다;
case error.position_unavailable :
ALERT ( "위치 실패, 위치 정보를 사용할 수 없습니다");
//x.innerhtml = "위치 정보를 사용할 수 없습니다. [위치 정보를 사용할 수 없습니다]"
부서지다;
케이스 오류. 타임 아웃 :
ALERT ( "위치 실패, 사용자 위치를 확보하라는 요청");
//x.innerhtml = "사용자 위치를 가져 오기위한 요청.
부서지다;
case error.unknown_error :
ALERT ( "위치 실패, 위치 시스템 실패");
//x.innerhtml = "알 수없는 오류가 발생했습니다. [알 수없는 오류]"
부서지다;
}
}
/**
* 주소를 설정하십시오
*/
함수 setAddress (json) {
var position = document.getElementById ( "txtPosition");
//주
var provinc = json.province;
//도시
var city = json.city;
//구역
VAR DISTRICT = JSON.DISTRICT;
지방 = province.replace ( 'city', '');
position.value = province + "," + city + "," + 지구;
position.style.color = 'black';
}