H5 위치정보 사용 방법

이번에는 H5 위치정보 사용법, H5 위치정보 사용법을 알려드리겠습니다. H5 위치추적 관련 주의사항은 무엇인가요? 실제 사례를 살펴보겠습니다.

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개 브라우저에서 얻은 위치 정보는 완전히 똑같습니다. 아마도 동일한 위치 서비스를 사용하고 있을 것입니다

일반적으로 PC 브라우저의 HTML5 위치 정보 기능으로 얻은 위치 정확도는 충분히 높지 않습니다. 이 HTML5 기능을 사용하여 도시일기예보를 만들 수 있습니다. 충분하지만 지도 애플리케이션이라면 여전히 오류가 너무 큽니다. 그러나 모바일 장치의 HTML5 애플리케이션인 경우, enableHighAcuracy 매개변수를 true로 설정하고 장치의 GPS 위치 확인을 호출하여 고정밀 지리적 위치 정보를 얻을 수 있습니다.

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

관련 읽기:

H5 모바일 적응을 구현하는 방법

H5 반응형 웹 디자인을 만드는 방법

HTML5가 도메인 간 통신을 수행하는 방법

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