HTML5에서 위치정보를 사용하는 방법

이번에는 HTML5 위치 지정 사용법과 HTML5 위치 지정 사용 시 주의사항이 무엇인지 보여드리겠습니다. 실제 사례를 살펴보겠습니다.

Geolocation은 HTML5의 중요한 기능 중 하나입니다. 이 기능을 사용하면 위치 정보를 기반으로 하는 애플리케이션을 개발할 수 있습니다. 오늘 기사에서는 HTML5 위치정보의 기본 원칙과 각 브라우저의 데이터 정확성을 소개합니다.

　 위치 정보에 접근하기 전에 브라우저는 사용자에게 위치 정보를 공유할지 여부를 묻습니다. Chrome 브라우저를 예로 들어 Chrome 브라우저가 웹 사이트와 위치를 공유하도록 허용하면 Chrome 브라우저가 로컬 네트워크를 전송합니다. Google 위치 서비스 정보, 대략적인 위치. 그러면 브라우저는 귀하의 위치를 ​​요청하는 웹사이트와 귀하의 위치를 ​​공유합니다.

　HTML5 Geolocation API는 사용이 매우 간단합니다.

 if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(locationSuccess, locationError,{
        // 指示浏览器获取高精度的位置，默认为false
        enableHighAccuracy: true,
        // 指定获取地理位置的超时时间，默认不限时，单位为毫秒
        timeout: 5000,
        // 最长有效期，在重复获取地理位置时，此参数指定多久再次获取位置。
        maximumAge: 3000
    });
}else{
    alert("Your browser does not support Geolocation!");
}

　locationError는

 locationError: function(error){
    switch(error.code) {
        case error.TIMEOUT:
            showError("A timeout occured! Please try again!");
            break;
        case error.POSITION_UNAVAILABLE:
            showError('We can\'t detect your location. Sorry!');
            break;
        case error.PERMISSION_DENIED:
            showError('Please allow geolocation access for this to work.');
            break;
        case error.UNKNOWN_ERROR:
            showError('An unknown error occured!');
            break;
    }
}

　locationSuccess에 따라 위치 정보를 가져오지 못하는

콜백 함수입니다. 위치 정보를 성공적으로 획득하여 반환하는 콜백 함수입니다. 데이터에는 경도, 위도 등의 정보가 포함되어 있으며 Google Map API와 결합하여 현재 사용자의 위치 정보를 다음과 같이 지도에 표시할 수 있습니다.

 locationSuccess: function(position){
    var coords = position.coords;    
    var latlng = new google.maps.LatLng(
        // 维度
        coords.latitude,
        // 精度
        coords.longitude
    );  
    var myOptions = {  
        // 地图放大倍数  
        zoom: 12,  
        // 地图中心设为指定坐标点  
        center: latlng,  
        // 地图类型  
        mapTypeId: google.maps.MapTypeId.ROADMAP  
    };  
    // 创建地图并输出到页面  
    var myMap = new google.maps.Map(  
        document.getElementById("map"),myOptions  
    );  
    // 创建标记  
    var marker = new google.maps.Marker({  
        // 标注指定的经纬度坐标点  
        position: latlng,  
        // 指定用于标注的地图  
        map: myMap
    });
    //创建标注窗口  
    var infowindow = new google.maps.InfoWindow({  
        content:"您在这里<br/>纬度："+  
            coords.latitude+  
            "<br/>经度："+coords.longitude  
    });  
    //打开标注窗口  
    infowindow.open(myMap,marker); 
}

테스트 후 Chrome/Firefox/Safari/Opera 4개 브라우저에서 얻은 위치 정보는 동일하며 아마도 동일한 위치 서비스를 사용하고 있을 것입니다.

그러나

IE 브라우저에서 얻은 데이터는 다음과 같습니다. 위의 브라우저에서 얻은 데이터와 다릅니다.

이 기사의 사례를 읽으신 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 다른 관련 기사를 주목하십시오. PHP 중국어 웹사이트에서!

추천 도서:

H5의 History 모드 사용에 대한 자세한 설명

localstorage 및 sessionstorage 사용 기록

indexeddb 데이터베이스 사용에 대한 자세한 설명

위 내용은 HTML5에서 위치정보를 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!