Пока что мы выводили географические данные на экран в том виде, в котором получали их от объекта. Однако большинству обычных людей они не дают никакой полезной информации. Я бы не смог немедленно назвать широту и долготу моего текущего местоположения, не говоря уж о том, чтобы идентифицировать произвольную точку земного шара по этим значениям. У нас есть две альтернативы: обрабатывать возвращаемые данные внутри приложения, вычисляя позицию, расстояние и другие переменные, которые позволят предложить пользователям полезные результаты (такие, как магазины или рестораны по соседству), или показывать информацию, полученную с помощью API геолокации, в более понятном виде. А что может быть понятнее, чем указание нужной точки на карте?
Раньше в этой книге мы уже упоминали API Google Maps. Это внешний API JavaScript авторства Google, который никак не связан с HTML5, но широко используется на множестве современных веб-сайтов и приложений. Он предлагает различные способы взаимодействия с интерактивными картами и даже реальными видами некоторых мест посредством технологии StreetView.
Мы продемонстрируем простой пример использования одной из составляющих этого API под названием API Static Maps (Статические карты). Для того чтобы воспользоваться преимуществами этого API, нужно всего лишь сформировать URL-адрес с информацией о местоположении, и в ответ будет возвращено изображение выбранной области на карте.
Листинг 9.6. Представление географических данных на карте
Function initiate(){
Var get=document. getElementById(‘getlocation’); get. addEventListener(‘click’, getlocation, false);
Function getlocation(){
Navigator. geolocation. getCurrentPosition(showinfo, showerror);
}
Function showinfo(position){
Var location=document. getElementById(‘location’); var mapurl=’http://maps.google.com/maps/api/
Staticmap? center=’+position. coords. latitude+’,’+ position. coords. longitude+’&zoom=12&size=400×400&sensor= false&markers=’+position. coords. latitude+’,’+ position. coords. longitude; location. innerHTML='<img src="’+mapurl+’">’;
}
Function showerror(error){
Alert(‘Ошибка: ‘+error. code+’ ‘+error. message);
}
Window. addEventListener(‘load’, initiate, false);
Этот код чрезвычайно прост. Мы добавили метод getCurrentPosition() и отправили информацию функции showinfo() так же, как делали это в предыдущих примерах. Единственное различие — на этот раз внутри функции мы вставили значение объекта Position в URL-адрес в домене Google. com. Полученный адрес затем используется в качестве источника в элементе <img>, благодаря чему фрагмент карты появляется на экране.
Протестируйте код из листинга 9.6 в своем браузере с использованием шаблона из листинга 9.1. Зайдите на веб-страницу API Google Maps и изучите другие доступные варианты.
Адрес страницы http://code.google.com/apis/maps/. Поменяйте значения атрибутов zoom и size в URL-адресе, чтобы изменить внешний вид карты, возвращаемой API.
Добавить комментарий