Установка карты на api 2гис
- Информация о материале
- Категория: Админ
- Просмотров: 970
Быстрая настройка и установка на сайт карты на API 2ГИС
Пример:
Более подробную информацию о настройке карты можно найти на API карт 2ГИС
Самый быстрый способ установить на сайт карту — это воспользоваться констурктором Яндекса, но он имеет ряд недостатков:
- стандарное оформление
- карта привязывается к аккаунту на Яндексе
- работает менее стабильно
В этой заметке рассмотрим, как установить карту с использованием API 2ГИС и потерять на этом не более 10 минут.
Изначально данная заметка задумывалась как "Установка карты на API Яндекс", но Яндекс ввел ключи для своих API, а это дополнительная заморочка с получением этого самого ключа (иметь аккаунт, указать телефон, описать сайт и т.д).
На данный момент карты на API Яндекса работают и без ключей, но как долго это продлится никто не знает.
В тоже время, карты от 2ГИС ничем не хуже, а изначальной задачей была именно быстрая настройка и установка карты.
Подключаем API 2ГИС:
<script src="https://maps.api.2gis.ru/2.0/loader.js?pkg=full"></script>
Создаем контейнер для карты:
<div id="map" style="width:100%; height:400px"></div>
Создаем карту, маркер и попап с информацией:
var map;
DG.then(function () {
map = DG.map('map', {
center: [66.660119, 66.383776], /* Координаты центра карты */
zoom: 16, /* Масштаб */
scrollWheelZoom: true
/*scrollWheelZoom: false /* Запрет прокрутки карты колесом мыши */
});
mapicon = DG.icon({
iconUrl: 'https://tjan.ru/images/svg/maps1.svg', /* Иконка маркера */
iconAnchor: [32, 64],
popupAnchor: [0, 24],
className: 'map-icon',
iconSize: [64, 64] /* Размер иконки */
});
DG.marker([66.660119, 66.383776], {icon: mapicon}).addTo(map).bindPopup('<div class="map-popup"><h2>TJAN.RU</h2><br/>Лайфхаки для админа</div>');/* Координаты маркера и текст попапа */
});
Чтобы узнать координаты, открываем карту 2ГИС и нажимаем на нужную нам точку.
В адресной строке будет нечто похожее на: https://2gis.ru/geo/70030076216150753/66.383419%2C66.660228?m=66.38582%2C66.659248%2F16.25 [66.659248, 66.38582] - это и есть наши координаты.
Еще один вариант найти координаты - это открыть карту на Яндексе, на нужной нам точке нажать правую кнопку мыши и выбрать "Что здесь". В появившемся окошке будет написана широта и долгота.
Добавляем стили:
.map-popup {
background: #FFF;
width: 300px;
padding: 20px;
color: #000;
border: 3px solid #337AB7;
box-sizing: border-box;
}
.map-popup h2 {
margin: 0;
font-size: 22px;
color: #337AB7;
}
.map-icon {
visibility: visible!important; /* Оставляем иконку видимой при открытии попапа */
display: inline!important;
}
.leaflet-popup-tip-container {
display: none!important; /* Убираем родной указатель при открытом попапе */
}
.leaflet-popup-content {
margin:0!important;/* Убираем отступы у попапа */
}
Далее остается только подобрать маркер для нашей карты, например этот:
