Создание пользовательской карты с помощью Google Maps Javascript API — часть 1
В этой статье я расскажу о технической реализации моей собственной карты преступности в Великобритании. Вы можете ознакомиться с этой статьей, чтобы ознакомиться с предысторией.
Это окончательный результат
Расчетное время выполнения: в течение 1 часа
Требование к моей собственной карте преступности в Великобритании
- Показать количество преступлений в большой географической области в Google Map
- Отфильтровать какой-либо тип преступления
Я начал с просмотра платформы Google Maps, чтобы проверить, какой продукт подходит для моих нужд.
Maps JavaScript API позволяет настраивать карты с собственным содержанием и изображениями для отображения на веб-страницах и мобильных устройствах. Maps JavaScript API поддерживает четыре основных типа карт (дорожная карта, спутниковая карта, гибридная карта и рельеф местности), которые можно изменять с помощью слоев и стилей, элементов управления и событий, а также различных служб и библиотек.
— https://developers.google.com/maps/documentation/javascript/overview
Maps Javascript API не является бесплатным, однако Google предоставляет 200 долларов США на бесплатное использование Карт каждый месяц, учитывая, что стоимость составляет 0,007 доллара США за 1000 запросов, это означает, что я могу иметь бесплатную квоту 28571 в месяц, неплохо для меня, я думаю, что буду Чтобы не использовать всю квоту каждый месяц, я решил использовать Maps Javascript API.
Что мне нужно?
Просто HTTP-сервер, на котором размещен мой html, может служить моей цели. Я решил выбрать Google Cloud Platform. Одной из причин этого является то, что я учусь, чтобы подготовиться к экзамену на Professional Cloud Architect. Почему бы не испачкать руки и не попробовать? Однако вы можете свободно использовать GCP, AWS или свой локальный сервер, который с установленным http-сервером не предъявляет особых требований к веб-серверу.
Чтобы использовать Google Maps Javascript API, вы должны войти в Google Cloud Platform, чтобы создать ключ API, который вы будете использовать в своем html. (Я пропустил введение Google Cloud Platform здесь, есть много продуктов, которые всегда бесплатны, и если вы новые клиенты, вы можете получить кредит в размере 300 долларов США в течение 1-летнего бесплатного пробного периода, посетите https://cloud .google.com/free/» для более подробной информации.)
Перейдите в Google Cloud Platform, перейдите на страницу учетных данных, используя меню API и службы > Учетные данные, на странице учетных данных нажмите + СОЗДАТЬ УЧЕТНЫЕ ДАННЫЕ выберите Ключ API в раскрывающемся меню.
Нажмите КЛЮЧ ОГРАНИЧЕНИЯ, чтобы продолжить.
Я рекомендую вам настроить ограничения, например, выбрать HTTP-рефереры (веб-сайты), чтобы ограничить использование API, отправляемого вашим веб-сайтом.
Кроме того, чтобы ограничить этот ключ API, чтобы разрешить доступ только к Maps Javascript API.
Нажмите Сохранить, готово! Ключ готов к использованию.
Я использую библиотеку MarkerClustererPlus в сочетании с Maps JavaScript API для объединения маркеров непосредственной близости в кластеры и упрощения отображения маркеров на карте.
Страница содержит пример, который вы можете просто скопировать для использования, просто нужно обновить свой собственный ключ API и обновить скрипт src.
<!-- Replace following script src -->
<script src="/maps/documentation/javascript/examples/markerclusterer/[email protected]">
</script>
<script defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>
Чтобы обновить и стать таким:
<script src="https://unpkg.com/@google/[email protected]/dist/markerclustererplus.min.js"></script> </script> <script defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA5Hy--HxoaKz9wO7gs4P3TTF8f4nVxyso&callback=initMap"> </script>
Глядя на пример кода из Google, мы знаем, что можем просто указать широту и долготу, а затем библиотека сделает все остальное.
var locations = [
{lat: -31.563910, lng: 147.154312},
{lat: -33.718234, lng: 150.363181},
{lat: -33.727111, lng: 150.371124},
{lat: -33.848588, lng: 151.209834},
{lat: -33.851702, lng: 151.216968},
{lat: -34.671264, lng: 150.863657},
{lat: -35.304724, lng: 148.662905},
{lat: -36.817685, lng: 175.699196},
{lat: -36.828611, lng: 175.790222},
{lat: -37.750000, lng: 145.116667},
{lat: -37.759859, lng: 145.128708},
{lat: -37.765015, lng: 145.133858},
{lat: -37.770104, lng: 145.143299},
{lat: -37.773700, lng: 145.145187},
{lat: -37.774785, lng: 145.137978},
{lat: -37.819616, lng: 144.968119},
{lat: -38.330766, lng: 144.695692},
{lat: -39.927193, lng: 175.053218},
{lat: -41.330162, lng: 174.865694},
{lat: -42.734358, lng: 147.439506},
{lat: -42.734358, lng: 147.501315},
{lat: -42.735258, lng: 147.438000},
{lat: -43.999792, lng: 170.463352}
]
Где получить информацию о местах совершения преступлений в Великобритании?
К счастью, данные можно бесплатно загрузить с сайта полиции Великобритании (https://data.police.uk/data/)
После загрузки и распаковки вы можете увидеть список файлов CSV.
Я просто буду использовать Microsoft Excel для создания данных для нас. Просто введите формулу Excel, и Excel сгенерирует все наши данные. Скопируйте сгенерированные данные и поместите в свою переменную местоположения.
=CONCATENATE("{lat: ",F2,", lng: ",E2,"},")
Вы также можете фильтровать данные в соответствии с вашими потребностями.
Загрузите измененный html на свой веб-сервер. Миссия завершена!
Я могу увеличивать и уменьшать масштаб, чтобы проверить преступление с помощью Google Maps.
Данные по столичной улице за 2020–2006 годы лучше просматривать на домашнем компьютере, так как точка данных большая (размер файла: 732 КБ).
*обновление: веб-сайт теперь переработан, перейдите на https://bestplaceuk.com/, чтобы посмотреть
