Процедура определения положения на карте по координатам (а именно это нам и нужно, чтобы узнать, наконец, где мы находимся!) называется обратным геокодированием. Его можно осуществить с помощью нескольких сервисов, мы воспользуемся Google Maps. Для этого подключим эту службу на нашу страницу:
<script src="http://maps. google. com/maps/api/js? sensor=false"></script>
И чуть изменим определение геолокации:
If (navigator. geolocation) {
Navigator. geolocation. getCurrentPosition(showPosition, errorHandler): } else {
Теперь сама функция showPosition:
Function showPosition(pos) {
определяем широту и долготу var latitude = pos. coords. latitude; var longitude = pos. coords. longitude;
загружаем Google Map
Var latlng = new google. maps. LatLng(latitude, longitude); var myOptions = { zoom: 15, center: latlng,
MapTypeId: google. maps. MapTypeId. HYBRID
};
Var map = new google. maps. Map(document. getElementById("map"), myOptions);
Добавляем маркер
Var marker = new google. maps. Marker({ position: latlng, map: map, title:"Вы здесь!"
});
}
Для добавления карты на страницу воспользуемся контейнером, в который google. maps сам добавит элемент canvas для выгрузки карт:
Результат — на рис. 98.
Рис. 98. Да, мы в Питере!
Я тут не буду пересказывать про Google Maps API, документация по этому сервису доступна. Просто для проверки точности определения нашего расположения можно немного изменить параметр zoom:
<body>
<div id="map"> </div>
</body>
Var myOptions = { zoom: 17,
Результат (рис. 99) лично меня немного испугал (я даже в окно посмотрел, нет ли там google-маркера).
Добавить комментарий