Вопрос или проблема
В течение нескольких лет я использовал NgMap для Angular 1.x (обратите внимание, что мне решение для v1.x; я не собираюсь изучать TypeScript и использовать Angular v2 или новее).
Похоже, в прошлом году Google изменил API, чтобы требовать ключ и номер кредитной карты. У меня возникают проблемы с работой ключа как на localhost, так и на моем сервере, так что, возможно, пора переключиться на OSM.
Кто-нибудь знает хорошую, бесплатную библиотеку или набор директив и т.д. для OSM и AngularJS v1.x?
Я выбрал LeafletJs, которая бесплатна и чрезвычайно хорошо документирована, и легко используется с Open Street maps (и другими).
На StackOverflow в настоящее время более 27,500 вопросов, отмеченных тегом Leaflet, так что вы можете быть уверены в поддержке.
Я использую его почти с того момента, как задал этот вопрос (должен был ответить раньше) и уже имею много проектов за плечами.
Ответ или решение
Вопрос об использовании интерфейса/API Open Street Maps с AngularJS 1.x становится все более актуальным, особенно в свете недавних изменений в API Google, требующего ключ и номер кредитной карты. Это подталкивает разработчиков искать альтернативные решения, и одним из лучших вариантов является использование LeafletJS, который отлично работает с Open Street Maps и предоставляет все необходимые инструменты для интеграции карт в ваши веб-приложения.
Почему LeafletJS?
LeafletJS — это популярная библиотека JavaScript для работы с интерактивными картами. Она легка, эффективна и обладает обширной документацией, что делает её отличным выбором для разработчиков, работающих с AngularJS 1.x.
1. Простота в использовании
Leaflet имеет интуитивно понятный интерфейс и простой синтаксис, что позволяет быстро разрабатывать и внедрять картографические решения. Например, чтобы добавить карту в ваше приложение, вам нужно всего лишь пару строк кода:
var map = L.map('map').setView([51.505, -0.09], 13);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19,
}).addTo(map);2. Гибкость и настраиваемость
Библиотека поддерживает большое количество плагинов, которые позволяют расширить функциональность. Например, можно добавлять маркеры, геолокацию, полилинии и многим другим.
3. Обширное сообщество
Как вы отметили, на StackOverflow уже более 27,500 вопросов по Leaflet. Это свидетельствует о широкой поддержке сообщества, где вы можете найти решения для различных проблем и обменяться опытом с другими разработчиками.
Как интегрировать LeafletJS в AngularJS 1.x
Процесс интеграции LeafletJS в AngularJS 1.x включает в себя несколько этапов:
1. Подключение библиотек
Добавьте LeafletJS и CSS в ваш проект. Вы можете использовать CDN или скачать файлы и разместить их локально.
<link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>2. Создание AngularJS директивы
Создайте директиву, которая будет инициализировать карту и управлять её состоянием. Это позволит вам интегрировать Leaflet в ваши AngularJS компоненты.
app.directive('leafletMap', function() {
return {
restrict: 'E',
scope: {
center: '=',
zoom: '='
},
link: function(scope, element, attrs) {
var map = L.map(element[0]).setView(scope.center, scope.zoom);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19,
}).addTo(map);
}
};
});3. Использование директивы в разметке
Теперь вы можете использовать вашу новую директиву в вашем HTML-коде:
<leaflet-map center="[51.505, -0.09]" zoom="13"></leaflet-map>Заключение
Перенос на Open Street Maps в сочетании с LeafletJS — это разумный шаг для разработчиков, ищущих бесплатное и эффективное решение для работы с картами в приложениях на AngularJS 1.x. С учетом простоты использования и обширного сообщества, Leaflet позволит вам создавать мощные и интерактивные картографические приложения, которые удовлетворят потребности ваших клиентов и пользователей. Не упустите возможность изучить данный инструмент и применить его в своих проектах.