Введение
Google Maps — это веб-приложение и технология картографической службы, предоставляемые Google. Приложение предоставляет подробную информацию о географических регионах, местах, карты улиц, планировщик маршрутов для пеших, автомобильных, воздушных и спутниковых снимков многих мест во многих странах по всему миру. API карт Google дает вам свободу создавать индивидуальные карты, которые могут выполнять самые разные функции.
Этот учебник разработан, чтобы показать пользователю (знакомому с программированием на JavaScript и концепциями объектно-ориентированного программирования), как создать карту Google и связанное с ней приложение с помощью Google Maps JavaScript API V3.
Географические широта и долгота
Мы можем представить Земля как сфера, так как мы описали, где точки на ее поверхности? Самый распространенный способ определения точек на поверхности Земли описывается двумя числами — ее широтой и долготой. Если капитан корабля или пилот хочет указать положение на карте, они используют эти «координаты». Эти значения координат измеряются в градусах и представляют собой угловые расстояния, рассчитанные от центра Земли.
Широта:
Представьте себе Землю как прозрачную сферу с осью, вокруг которой она вращается. Концами оси являются Северный и Южный полюса. Экватор — это линия, которая окружает Землю на равном расстоянии от Северного и Южного полюсов. Широта точки на поверхности Земли — это угол между плоскостью экватора и линией, проходящей через эту точку.
Поскольку экватор расположен на 0 °, Северный полюс на 90 ° северной широты или 90 ° (положительная широта подразумевает север), а Южный полюс на 90 ° южной широты или –90 ° (отрицательная широта подразумевает северную широту). ). Следовательно, измерения широты находятся в диапазоне от 0 ° до + 90 ° или от 0 ° до –90 °.
Долгота:
Линии долготы, называемые меридианами, проходят перпендикулярно линиям широты и проходят через оба полюса. Каждая линия долготы является частью большого круга. Нет очевидной точки 0 градусов для долготы, как для широты. Долгота определяет положение точки на Земле с востока на запад путем измерения углового расстояния от Гринвичского меридиана (или нулевого меридиана, где долгота равна 0) вместе с экватором.
Измерения долготы находятся в диапазоне от 0 ° до 180 ° восточной долготы или 180 ° (положительная долгота подразумевает восток) и от 0 ° до -180 ° западной или -180 ° (отрицательная долгота подразумевает запад)
Широта и долгота на карте Google:
Получение ключа API
Использование ключа API все приложения Maps API загружают карты. Ключ API бесплатный, но Google отслеживает использование API Карт вашим приложением, и если оно превышает лимиты использования, вам необходимо приобрести дополнительную квоту..
Чтобы создать ключ API:
- Перейдите в консоль API по адресу https://code.google.com/apis/console и войдите в систему. с вашей учетной записью Google.
- Нажмите ссылку Services в левом меню.
- Активируйте службу Google Maps API v3. .
- Щелкните ссылку Доступ к API в левом меню. Ваш ключ API доступен на странице доступа к API в разделе «Простой доступ к API». Приложения API Карт используют ключ для приложений браузера.
Вы можете использовать ключ API на любом сайте. Но рекомендуется использовать ваш ключ в ваших собственных доменах, чтобы предотвратить его использование на неавторизованных сайтах. Чтобы указать собственный домен для использования ключа API, щелкните ссылку Изменить разрешенные источники перехода … для своего ключа.
Создать простую карту
Вот простой пример карты, на которой отображается карта с центром в Берлине, Германия.
html {height: 100%} body {height: 100 %; маржа: 0; padding: 0} # map-canvas {height: 100%} function initialize () {var mapOptions = {center: new google.maps.LatLng (52.5167, 13.3833), zoom: 10,}; var map = new google.maps.Map (document.getElementById ("холст карты"), mapOptions); } google.maps.event.addDomListener (окно, «загрузка», инициализация); Просмотрите пример в браузер
Краткое объяснение:
Здесь мы используем простой HTML5 DOCTYPE, как показано ниже.
Большинство современных браузеров будут отображать контент, объявленный с этим DOCTYPE, в «стандартном режиме», что означает, что ваше приложение должно быть больше кроссбраузерность. Если вы не используете этот тип документа, указанная веб-страница будет отображаться в «режиме причуд» и, возможно, не сможет отобразить некоторые из доступных функций. Это также сделает вашу веб-страницу менее кросс-браузерной.
Это объявление CSS указывает, что контейнер карты
(названный map-canvas) должен занимать 100% высоты тела HTML.
html {height: 100%} body {height: 100%; маржа: 0; padding: 0} # map-canvas {height: 100%}
Следующий скрипт загружает API Карт Google:
Для использования API Карт Google необходимо указать, использует ли ваше приложение датчик ( например, GPS-локатор) для определения местоположения пользователя, что важно для мобильных устройств. Чтобы указать, что приложение использует сенсорное устройство, вы должны передать требуемый параметр сенсора в тег . Приложения, которые определяют местоположение пользователя с помощью датчик должен передавать sensor = true при загрузке JavaScript API Карт.
Параметры карты:
var mapOptions = {center: new google.maps.LatLng (52.5167, 13.3833), zoom: 10};
Где объект LatLng содержит широту и долготу Берлина, а «центр» используется для центрирования карты. в этой конкретной точке.
Масштаб: свойство масштабирования устанавливает текущий уровень масштабирования.
Объект карты:
Следующая команда создаст новый объект карты:
var map = new google.maps.Map (document.getEle mentById ("map-canvas"), mapOptions);
Загрузка карты:
Следующая команда загрузит карту :
google.maps.event.addDomListener (window, 'load', initialize);
Далее: Google Maps Javascript Справочник по API V3.
- Новый контент, опубликованный на w3resource:
- Упражнения по программированию на Scala, практика, решение
- упражнения Python Itertools
- упражнения Python Numpy
- пакет Python GeoPy упражнения
- упражнения Python Pandas
- упражнения Python nltk
- упражнения Python BeautifulSoup
- шаблон формы
- Композитор - Менеджер пакетов PHP
- PHPUnit - Тестирование PHP
- Laravel - PHP Framework
- Angular - JavaScript Фреймворк
- React - Библиотека JavaScript
- Vue - Фреймворк JavaScript
- Jest - Фреймворк для тестирования JavaScript
v>
