이번에는 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 위치정보 사용 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!