Карты, пожалуй, самые важные вещи в истории. Карты указывают направление к неизведанным местам, которые уже были просмотрены предыдущей стороной. Карты стары, как человеческая цивилизация, люди всегда хотели нанести карту мира. И в будущем (сегодня) мы нанесли большую часть этого на карту. В 1973 году американские военные начали разработку GPS (Global Positioning Systems) для помощи в навигации своих кораблей, самолетов и войск, которые стали полностью функционировать в 1995 году. После катастрофы Korean Airlines в 1983 году, когда Советский Союз сбил гражданский самолет, ошибочно приняв его. для американского шпионского дела. 269 пассажиров погибли в результате этого инцидента, который побудил администрацию Рейгана предоставить гражданским лицам бесплатный доступ к GPS. Сегодня для запуска GPS требуется колоссальные 750 миллионов долларов в год в виде военных расходов (и начальные 12 миллиардов долларов для вывода его на орбиту).
Теперь, когда мы закончили урок истории, мы можем перейти к настройке Google Maps. Приятно знать, что почти каждое устройство, производимое сегодня, имеет встроенные функции GPS, к которым он может получить доступ бесплатно без необходимости подключения для передачи данных (однако не все устройства могут это сделать). Это означает, что вы можете точно определить фактическое положение устройства. Теперь вы можете испугаться и подумать: «Ну, разве это не облегчает отслеживание меня кем-нибудь?»… Это что-то вроде «да» и «нет».
Отслеживание пользователей.
Хотя вы можете отслеживать пользователя, в большинстве случаев это незаконно без согласия пользователя. Facebook активно отслеживает ваше местоположение, но большинство людей не знают, что они разрешили Facebook отслеживать их, нажав кнопку «Принять условия и положения» без ознакомления с условиями, что позволяет Facebook отслеживать каждое ваше движение на законных основаниях. Большинство других сервисов делают это, включая Google, Twitter и почти любую другую крупную компанию, о которой вы только можете подумать. Браузеры имеют функции безопасности, которые не позволяют сайтам использовать ваше местоположение, если вы не согласны с этим. В заключение я мог бы сказать, что вы в полной безопасности, Google поддерживает вас, и производитель вашего устройства также поддерживает вашу безопасность, обеспечивая безопасность вашего устройства и предоставляя информацию только тем сторонам, которым вы явно сообщаете об этом.
Давай начнем.
Чтобы начать использовать карты Google, вам необходимо получить ключ API из консоли Google Cloud Platform.
После создания учетной записи перейдите по этой ссылке, чтобы получить ключ API.
Вы пройдете через три шага. Первый шаг - настроить продукты, затем создать новый проект и настроить биллинг. Вот что вы ожидаете увидеть, перейдя по этой ссылке.
Получив ключ API, вы можете создать скрипт, который будет аутентифицировать ваш URL (который вам будет предложено добавить при создании проекта в консоли Google) для использования Google Maps. Вот пример того, где вы должны разместить ключ.
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY&callback=myMap"></script>
Отображение базовой карты.
Чтобы создать базовую карту, вставьте следующий код, чтобы создать индексный HTML-документ.
<!doctype>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
#myMap {
width: 600px;
height: 400px;
}
</style>
</head>
<body>
<div id="myMap"></div>
<script src="./js/script.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBu-916DdpKAjTmJNIgngS6HL_kDIKU0aU&callback=myMap"></script>
</body>
</html>
Ключ, показанный выше в примере кода, является моим собственным, вам следует сгенерировать личный ключ, так как мой ключ не будет работать в вашем приложении, и вы получите ошибку аутентификации.
В файл script.js вставьте следующие строки кода.
let myMap = () => {
let mapProp = {
center: new google.maps.LatLng(1.2921,36.8219),
zoom: 5
}
let map = new google.maps.Map(document.getElementById('myMap'),
mapProp)
}
Давайте немного пройдемся по нашему коду. object mapProp предоставляет два свойства, которые определяют центр карты с помощью координат и уровня масштабирования карты. В следующей строке мы определяем map:, он создает новую карту внутри любого элемента div с идентификатором myMap, используя параметры, содержащиеся в mapProp, который был определен ранее. Вам нужно получить ключ API от Google, чтобы создать эту карту, которую можно использовать бесплатно, но по какой-то причине они запрашивают ваши платежные данные.
Наложения карт.
Мы можем наложить на карту определенные объекты, чтобы пользователи могли лучше понять, что вы пытаетесь выразить. Например, вы можете добавить разные маркеры, представляющие различные элементы на карте, такие как котенок для зоомагазина, логотип вашей компании над вашим местоположением, линии через море или озеро, чтобы указать направление, многоугольники для покрытия определенных областей, таких как Бермудский треугольник. и даже всплывающее окно, которое предоставляет посетителям текстовую информацию. Посмотрим, как можно реализовать следующее.
Маркеры.
Добавить маркер в Найроби-Сити легко, просто добавьте следующий код в свой JS-файл. Убедитесь, что код находится в функции myMap.
let marker = new google.maps.Marker({ position: mapProp.center })
marker.setMap(map)
Все просто, правда? Теперь ваша карта должна выглядеть так.
Вы также можете добавить анимацию к маркеру и использовать свой собственный значок в качестве маркера, просто измените свой код на следующие строки, чтобы они соответствовали моему с набором свойств анимации и значка.
let marker = new google.maps.Marker({ position: mapProp.center,
animation: google.maps.Animation.BOUNCE, icon: '/custom.png' })
marker.setMap(map)
Вместо этого будет использоваться ваш пользовательский значок, и он будет подпрыгивать вверх и вниз, чтобы вызвать интерес и привлечь внимание посетителя вашего веб-сайта, подобно тому, как подпрыгивающие значки на Mac привлекают ваше внимание, чтобы открыть приложение.
Полилинии и многоугольники.
Полилиния - это линия или серия линий, нарисованных с использованием координат в упорядоченной последовательности. Полилиния имеет следующие свойства: path, strokeColor, strokeOpacity, strokeWeight и редактируемость.
Чтобы создать полилинию, изображающую поездку из Кисуму в Найроби и Момбасу, вы можете использовать приведенный ниже код.
Карта будет похожа на мою ниже.
В геометрии многоугольник - это плоская фигура, ограниченная конечной цепочкой прямых линий, замыкающихся в петлю, чтобы сформировать форму многоугольника, как определено в Википедии. Многоугольник очень похож на ломаную линию, с той лишь разницей, что многоугольник образует замкнутый контур. Чтобы создать многоугольник из нашей полилинии, мы могли бы соединить Момбасу с Кисуму, и область, покрытая этой новой формой многоугольника, станет решением для области, которую нам нужно выделить на нашей карте.
Многоугольник поддерживает все свойства ломаной линии с двумя дополнительными свойствами: fillColor, чтобы указать цвет многоугольника, и fillOpacity, чтобы указать непрозрачность залитой области. Вот код, который рисует синий многоугольник с использованием городов Ньери, Найроби и Мачакос, чтобы выделить то, что я считаю наиболее густонаселенным районом Кении. Не стесняйтесь оспаривать мое мнение 😉.
Вот как выглядит Многоугольник.
И это всего лишь один из примеров использования полигонов и ломаных линий Google Maps. Вы также можете нарисовать круг с определенной координатой в качестве центра круга с определенным радиусом, используя приведенный ниже код.
let myCity = new google.maps.Circle({
center: nairobi,
radius:20000,
strokeColor:"#0000FF",
strokeOpacity:0.8,
strokeWeight:2,
fillColor:"#0000FF",
fillOpacity:0.4
});
События.
Вы можете обрабатывать события на карте, указав, к какому свойству карты вы присоединяете свое событие, тип события для прослушивания и код, который будет запускаться при срабатывании события. Это довольно просто, и я не буду подробно останавливаться на этой простой теме, вот пример прикрепления прослушивателя событий к маркеру для увеличения до 9 каждый раз, когда человек наводит курсор на маркер.
google.maps.event.addListener(marker, 'hover', () => {
map.setZoom(9)
map.setCenter(marker.getPosition())
}
Довольно просто, не правда ли? Переменная marker представляет маркер, который вы должны были уже создать, как я показал в предыдущем подразделе, событие, которое нужно прослушать, - это наведение, а асинхронная функция, которая должна выполняться после того, как это очень конкретное событие запускается конкретным обработчиком событий, в этом случай, являющийся маркером.
Типы карт.
Google Maps поддерживает четыре различных типа карт. Типы карт: Гибрид, Рельеф, Спутник и Дорожная карта… Давайте рассмотрим каждый из них. Чтобы определить тип карты, добавьте эту строку кода в свой mapOptions в качестве свойства.
let mapOptions = {
center: new google.maps.LatLng(-1.2921, 36.8219),
zoom: 5,
mapTypeId: google.maps.MapTypeId.HYBRID
}
ДОРОЖНАЯ КАРТА по умолчанию представляет собой обычную двухмерную карту с дорогами, реками и названиями городов. Карта СПУТНИК показывает фотографическую карту области, например Google Street View, и поддерживает перспективный вид под углом 45 градусов. Карта HYBRID представляет собой комбинацию ДОРОЖНОЙ КАРТЫ и СПУТНИКОВОЙ карты, на которой показаны фотографические виды, вместе с названиями дорог и городов. Карта TERRAIN показывает только местность с реками, горами и пустынями, наиболее различимыми элементами. Вот пример визуализации базовой карты типа HYBRID.
На гибридной карте выше Найроби показан в центре карты с основными дорогами, отмеченными желтыми линиями с указанием их пунктов назначения. Когда вы увеличиваете масштаб, дороги становятся более детализированными, так как ландшафт также становится более детализированным.
Чтобы удалить наклон перспективы по умолчанию на 45 градусов, используйте:
map.setTilt(0) //or any custom tilt you would want in degrees
В перспективном виде карта по умолчанию добавит элемент управления поворотом между элементами управления панорамированием и масштабированием, который позволяет пользователю поворачивать изображение на 90 градусов, колесо компаса, показывающее направление, переключатель для режима просмотра в перспективе. Уменьшение масштаба карты приведет к отмене изменений, и будет отображена исходная карта, как в гибридном примере выше.
Затем вы можете настроить геолокацию для своего приложения, пройдя через это руководство, которое я специально сделал для геолокации.
Большое спасибо за то, что нашли время прочитать эту статью. Прошло целых два месяца с тех пор, как я что-то написал, но теперь можно с уверенностью сказать, что теперь вы снова получите две еженедельные статьи с этой недели. Ваше здоровье!
