| Россия |
Инспектор
Вы можете этот курс.
Опубликован: 12.12.2015 | Уровень: для всех | Доступ: платный
Лекция 9:
Geolocation (Google Maps API)
< Лекция 8 || Лекция 9 || Лекция 10 >
Ключевые слова: OPEN, MAP, ключ, API, запись, COM, сайт, веб-приложение, INDEX, координаты, шаблон, satellite, hybrid, terrain
Как уже говорилось выше, технология Tizen широко поддерживает многие популярные отраслевые стандарты. В наше время большую популярность приобрели различного рода картографические сервисы. Существуют коммерческие и Open Source-ные поставщики геоданных. К первой группе можно отнести такие сервисы, как Google Maps, Yahoo Maps, Yandex карты и другие. "Народный" проект Open Street Map относится ко второй категории. Для создания мобильного или веб-приложения, работающего с картами, разработчику вначале необходимо получить специальный ключ (API Key). Благодаря такому ключу вендор может контролировать использование своего сервиса, и при необходимости, связываться с разработчиком. Существуют определенные ограничения на количество соединений с сервисом. Так, компания Google установила лимит в 25000 подключений к Google Maps в день. На данном занятии мы познакомимся с примерами, представленными на сайте Google Maps JavaScript API. Эти примеры были немного адаптированы для России.
Процесс разработки картографических сервисов для Tizen мы проиллюстрируем на примере Google Maps. В начале нужно получить учетную запись Google, например, зарегистрировавшись на gmail.com. После этого необходимо зайти на сайт Google Developers Console и получить ключ.
https://console.developers.google.com/project/76316599618/apiui/credential?authuser=0#
Простое картографическое приложение
Получив ключ, мы можем создать базовое веб-приложение Tizen (geo1), Код файла index.html:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100% }
</style>
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?key=AIzaSyBhwqeicLVNk2L6M8Mo7EzgupjUvJPher4&sensor=TRUE">
</script>
<script type="text/javascript">
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(54.7375, 55.97666667),
zoom: 12,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>
В приведенном примере использован ключ автора, он выделен в листинге красным цветом. Вам необходимо ввести свой ключ. В строке
center: new google.maps.LatLng(54.7375, 55.97666667)
были введены координаты Уфы. Вы можете ввести свои координаты. Хотелось напомнить один момент. Традиционно, географические координаты указываются в формате: градусы, минуты, секунды, например, 54044'15''N, 55058'36''E (54 градуса, 44 минуты и 15 секунд северной широты, 55 градусов, 58 минут и 36 секунд восточной долготы), а в программе указан десятичный формат широты и долготы. Его можно получить следующим образом: 55+44/60+15/3600= 54,7375
При желании можно регулировать масштаб изображения, в нашем случае он равен 12:
zoom: 12
В строчке
mapTypeId: google.maps.MapTypeId.ROADMAP
можно выбирать формат отображения. В приведенном выше примере используется шаблон ROADMAP (стандартные двухмерные фрагменты Google Maps).
Если ROADMAP заменить на SATELLITE, то мы получим фрагменты, представленные сделанными со спутника фотографиями
Заменив SATELLITE на HYBRID, получим фотографические фрагменты с наложенным слоем, содержащим наиболее важные объекты (дороги, названия городов).
Заменив HYBRID на TERRAIN, получим фрагменты топографической карты с рельефом местности, высотами и гидрографическими объектами (горы, реки и т. д.)
< Лекция 8 || Лекция 9 || Лекция 10 >
