Геолокация в браузере

http://webmap-blog.ru/obzors/ispolzuem-html5-geolocation-api

Используем HTML5 Geolocation API

HTML5 Geolocation API дает возможность пользователям обмениваться информацией о их местоположении (координаты долготы и широты в браузере) в веб-приложениях.

Для этого пользователь должен разрешить возможность определения своего расположения.

Geolocation API поддерживается большеством современных браузеров: Firefox 3.5+, Opera 10.6+, Chrome 5+, Safari 5+ и Internet Explorer 9+.

В этой заметке я расскажу как использовать эту возможность с различными API карт.

Первое, Вы должны проверить поддерживает или нет HTML5 Geolocation API браузер пользователя.

Это можно сделать с помощью кода:

<script type="text/javascript">
if(navigator.geolocation) {
    alert("Geolocation API поддерживается");
} else {
    alert("Geolocation API не поддерживается в вашем браузере");
}
</script>

Определить местоположение пользователя можно, используя следующий код:

navigator.geolocation.getCurrentPosition(function(position) {
            var latitude = position.coords.latitude;
            var longitude = position.coords.longitude;
        }

Соединим два примера кода в один, получим простейший пример определения положения пользователя:

<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HTML5 Geolocation API</title>
 
<script type="text/javascript">
if(navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
            var latitude = position.coords.latitude;
            var longitude = position.coords.longitude;
			alert(latitude+' '+longitude);
});
 
} else {
    alert("Geolocation API не поддерживается в вашем браузере");
}
</script>
 
</head>
 
<body>
<p>Пример определения местоположения пользователя - HTML5 Geolocation API</p>
</body>
</html>

Посмотреть пример в действии

При просмотре примера в верху окна браузера может появиться информационная панель вида:

Информационная панель с сообщением

Нужно разрешить сообщить местоположение.

Тогда мы увидим окно с координатами

Окно с координатами

Информативней, если местоположение будет сразу показано на карте.

Рассмотрим как это можно сделать, используя различные API карт (Google, Bing , Nokia Maps, Яндекс.Карты и OpenStreetMap).

1. Пример с использованием API Яндекс.Карт

HTML5 Geolocation API - Яндекс.Карты

Посмотреть пример в действии

2. Пример с использованием API Google Maps

HTML5 Geolocation API - Google Maps

Посмотреть пример в действии

3. Пример с использованием API Bing Maps

HTML5 Geolocation API и Bing Maps

Посмотреть пример в действии

4. Пример с использованием API Nokia Maps

HTML5 Geolocation и Nokia Maps

Посмотреть пример в действии

5. Пример с использованием OpenStreetMap и библиотеки Leaflet

HTML5 Geolocation и OpenStreetMap

Посмотреть пример в действии

6. Пример с использованием OpenStreetMap и API Яндекс.Карт

HTML5 Geolocation - OpenStreetMap - Яндекс.Карты

Посмотреть пример в действии

Загрузить архив с файлами примеров

Для написания заметки использовалась статья: «Using HTML5 Geolocation API with Google, Bing and Nokia Maps».

AnythingSlider — Restart flash movie on show — CSS-Tricks

**AnythingSlider**

script type=”text/javascript”>

J(function () {

J(‘#slider1′).anythingSlider({

onSlideComplete: function (slider) {

[ flash interaction code here ]

},

width: 600,

height: 350,

resizeContents: false,

autoPlay: true,

autoPlayLocked: true,

delay: 10000,

animationTime: 600,

pauseOnHover: true

})

});

**Flash interaction**

script type=»text/javascript»>

function getFlashMovieObject(movieName)

{

if (window.document[movieName])

{

return window.document[movieName];

}

if (navigator.appName.indexOf(«Microsoft Internet»)==-1)

{

if (document.embeds && document.embeds[movieName])

return document.embeds[movieName];

}

else // if (navigator.appName.indexOf(«Microsoft Internet»)!=-1)

{

return document.getElementById(movieName);

}

}

function RestartFlashMovie()

{

var flashMovie=getFlashMovieObject(«myFlashMovie»);

flashMovie.Rewind();

flashMovie.Play();

}

The «Flash Interaction» code above must be adapted inside the onSlideComplete event handler. This is where I got stuck. How can I access the Name or ID properties of the Object tag inside the slider LI tag or of the Embed tag inside the Object tag (in IE)?

Can anyone help me rewrite the flash interaction code so I can use it with AnythingSlider?

Thanks in advance for any help.

Best regards.

Airton

Источник: AnythingSlider — Restart flash movie on show — CSS-Tricks.