Leaflet.js - самая простая библиотека карт, которую вы когда-либо найдете
Карты Google, безусловно, самые популярные встраиваемый виджет карты для веб-дизайнеров. Но что насчет добавление пользовательских функций такие как подсказки и маркеры булавки?
Это где удивительная библиотека, как Leaflet.js помогает тонну.
Это полностью бесплатный проект с открытым исходным кодом Первоначально созданный одним из парней из Mapbox по имени Владимир Агафонкин. С тех пор Leaflet вырос, чтобы включить десятки участников вокруг света.
Это часто обновлены с исправлениями ошибок и новыми функциями которые улучшают общую реализацию на любом веб-сайте. Это, безусловно, моя любимая картографическая библиотека из-за ее явной силы и эстетики дизайна.
В нем так много функций, что я не могу перечислить их все, но вот самые интересные:
- Мобильное аппаратное ускорение
- Маркеры булавок, оверлейные формы и всплывающие подсказки
- Пользовательская анимация масштабирования и панорамирования
- Нет JS-зависимостей
- Поддержка всех основных браузеров, включая IE7+
Реализация немного сложнее, потому что вам нужно введите координаты а также определить, насколько большой должна быть карта.
Пользователи всегда могут уменьшить а также панорамирование, поэтому взгляд всегда может измениться. Но это также основано на как вы определяете карту на странице.
Есть огромный страница документации полная информация для каждого аспекта листовки. К сожалению, он настолько плотный, что я не могу рекомендовать просто погрузиться в него, потому что вы, вероятно, потерялись. Вместо этого, проверьте Страница учебных листовок который также включает в себя Инструкция по началу работы для новичков.
Вы узнаете, как вставлять карты, менять размер / положение, и как добавить пользовательскую графику сверху, такие как круги или маркеры булавки.
Это одно вступительное руководство может научить вас всему, что вам нужно использовать Leaflet в блоге, на сайте компании или в любом будущем проекте.
Есть много веских причин для использования Google Maps: это мощный, надежный и бесплатный. Но Листовка идет с так много других функций из коробки и вам нужно только добавьте файлы CSS / JS на свою веб-страницу для начала. Вы даже можете найти копии размещены в Интернете если вы предпочитаете идти по маршруту CDN.
Не позволяйте документации отпугивать вас. Вы можете многому научиться, но не все функции необходимы для базовой настройки Leaflet.
И это не займет много времени, чтобы создать удивительную карту с нуля. Взгляните на это демо Codepen создан используя Leaflet.js и API Карт Google.
