4:22 AM Урок №4 Геолокация в HTML5 | ||||||||||||||||||
Локализиране на потребитеяПриложението за геолокация в HTML5 се използва за да извлечете данни за местоположението на потребителя. Понеже това нарушава правата на потребителите, позицията не е достъпна докато потребител не я одобри. Поддържащи браузъри
Internet Explorer 9+, Firefox, Chrome, Safari и Opera поддържат геолокация. Note: Геолокацията е много по-ефективна при устройства с GPS, като телефони и др.. Употреба на геолокация в HTML5Използвайте метода getCurrentPosition() за да стигнете до местоположението на потребителя. Това е прост пример за геолокация който връща Х и Y (координатите в ширина и височина) на потребителя. Пример<script>
var x = document.getElementById("demo"); function getLocation() { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(showPosition); } else { x.innerHTML = "Geolocation is not supported by this browser."; } } function showPosition(position) { x.innerHTML = "Latitude: " + position.coords.latitude + "<br>Longitude: " + position.coords.longitude; } </script> Обяснение на примера:
Горния пример е толкова проста геолокация, яе не може да обработва грешки. Обработка на грешки и ОтказиВторият параметър на метода getCurrentPosition() се използва за обработка на грешки. Той задава на функцията да се изпълни ако се провали в търсенето на местоположението на потребителя: Примерfunction showError(error) {
switch(error.code) { case error.PERMISSION_DENIED: x.innerHTML = "User denied the request for Geolocation." break; case error.POSITION_UNAVAILABLE: x.innerHTML = "Location information is unavailable." break; case error.TIMEOUT: x.innerHTML = "The request to get user location timed out." break; case error.UNKNOWN_ERROR: x.innerHTML = "An unknown error occurred." break; } } Кодове на грешките:
Изобразяване на резултата в картаЗа да изобразите резултата в карта, трябва да имате достъп до такъв софтуер, а именно софтуер който може да използва координатите X и Y (височина и ширина) като Google Maps например: Примерfunction showPosition(position) {
var latlon = position.coords.latitude + "," + position.coords.longitude; var img_url = "http://maps.googleapis.com/maps/api/staticmap?center= "+latlon+"&zoom=14&size=400x300&sensor=false"; document.getElementById("mapholder").innerHTML = "<img src='"+img_url+"'>"; } В горният пример използваме върнати данни за координатите X и Y (височина и ширина) за да покажем локацията в Google Maps (използвайки статично изображение)
Натиснете този бутон за да видите местоположението си: Специфична информация относно локациятаТози пример демонстрира как се използва геолокацията за да видите местоположението на потребител. Въпреки това, геолокацията е много полезна също и за показване на специфична информация. Примери:
Връщане на заявки с
| ||||||||||||||||||
| Свойство | Описание |
|---|---|
| coords.latitude | Ширината в десетично число |
| coords.longitude | Височината в десетично число |
| coords.accuracy | Точността на местоположението |
| coords.altitude | Надморската височина в метри над средното морско ниво |
| coords.altitudeAccuracy | Точността на надморската височина на позицията |
| coords.heading | Заглавието като градус по часовниковата стрелка - посока Север |
| coords.speed | Скоростта в метри/секунда |
| timestamp | Датата и часа на отговора |
Обекти при геолокация - Други
интересни методи
watchPosition() - Връща заявка на сегашното местоположение на потребителя и продължава да обновява позицията когато потребителя се движи (също като GPS в кола).
clearWatch() - Спира метода watchPosition().
Този пример показва как се ползва метода watchPosition(). Трябва ви точно GPS устройство за да го изпробвате (като телефон например):
Пример
var x = document.getElementById("demo");
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.watchPosition(showPosition);
} else {
x.innerHTML = "Geolocation is not supported by this browser.";
}
}
function showPosition(position) {
x.innerHTML = "Latitude: " + position.coords.latitude +
"<br>Longitude: " + position.coords.longitude;
}
</script>
Ако урокът ви е харесал можете да го споделите с вашите приятели във фейсбук :
| Всички коментари: 0 | |
