Вывод объектов из JSON файла на Яндекс карту
Эта статья о том, как выводить точки на яндекс карте через API из GeoJson файла. Преимущества данного способа заключается в том, что если у вас стоит задача вывести сразу много меток то вам не нужно делать много лишних инициализаций для их отображения.
Разметка файлов
Нам пригодится: API карт, jquery, понимание строения json объектов
Для начала давайте сделаем разметку HTML документа с картой
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>MAP</title>
<script type="text/javascript" src="https://api-maps.yandex.ru/2.1/?load=package.full&lang=ru-RU"></script>
</head>
<body>
<div class="container">
<div class="objects">
<ul>
<li><a href="#" data-filter="shop">Магазины</a></li>
<li><a href="#" data-filter="punkt">Пункты выдачи товара</a></li>
</ul>
</div>
<div class="map-container">
<div id="map"></div>
</div>
</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</body>
</html>Мы так же реализуем возможность фильтрации меток на карте. В нашем случае у нас будут магазины, и пункты выдачи.
Далее создадим файл style.css для стилизации
{
margin: 0;
padding: 0;
}
#map {
width: 100%;
height: 480px;
}
.container {
display: grid;
grid-template-columns: 350px 1fr;
}
.objects {
background: #f3f3f3;
}
.objects ul {
list-style: none;
padding-left: 0;
}
.objects ul li a {
display: block;
padding: 15px;
color: #4e4e4e;
font-size: 16px;
text-transform: uppercase;
text-decoration: none;
}
.objects ul li a.active {
background: #281b70;
color: #fff;
}Затем создаем основной JS скрипт, который инициализирует нам карту на странице с нужными параметрами
ymaps.ready(init);
function init() {
var myMap = new ymaps.Map('map', {
center: [48.707067, 44.516975],
zoom: 12
}, {
searchControlProvider: 'yandex#search'
});
$.getJSON( "objects.json", function( data ) {
objectManager = new ymaps.ObjectManager({
clusterize: true,
gridSize: 50,
clusterDisableClickZoom: false
});
objectManager.clusters.options.set('preset', 'islands#invertedNightClusterIcons');
myMap.geoObjects.add(objectManager);
objectManager.add(data);
});
$('.objects ul li a').click(function() {
objectManager.setFilter('properties.filter == "'+$(this).attr('data-filter')+'"');
$('.objects ul li a').removeClass('active');
$(this).toggleClass('active');
});
}Тут вы можете отключить, кластеризацию если она вам не нужна.
Достаточно в параметре clusterize установить значение false.
Но при выводе большого количества меток рекомендуем оставить кластеризацию!
Теперь создадим сам файл JSON где будут храниться данные с метками
{"type":"FeatureCollection","features":[{"type":"Feature","id":"1","geometry":{"type":"Point","coordinates":[48.720421,44.509088]},"properties":{"description":"1-ый магазин","iconCaption":"1-ый магазин","filter":"shop"},"options":{"preset":"islands#nightIcon"}},{"type":"Feature","id":"2","geometry":{"type":"Point","coordinates":[48.72698,44.490537]},"properties":{"description":"2-ой магазин","iconCaption":"2-ой магазин","filter":"shop"},"options":{"preset":"islands#nightIcon"}},{"type":"Feature","id":"3","geometry":{"type":"Point","coordinates":[48.697557,44.497833]},"properties":{"description":"3-ий магазин","iconCaption":"3-ий магазин","filter":"shop"},"options":{"preset":"islands#nightIcon"}},{"type":"Feature","id":"4","geometry":{"type":"Point","coordinates":[48.717284,44.529055]},"properties":{"description":"1-ый пункт выдачи","iconCaption":"1-ый пункт выдачи","filter":"punkt"},"options":{"preset":"islands#nightIcon"}},{"type":"Feature","id":"5","geometry":{"type":"Point","coordinates":[48.731205,44.52472]},"properties":{"description":"2-ый пункт выдачи","iconCaption":"2-ый пункт выдачи","filter":"punkt"},"options":{"preset":"islands#nightIcon"}}]}Краткое описание JSON файла
Обязательно каждой метке даем свой ID
В ключе coordinates прописываем координаты точки
Ключ description отвечает за краткое описание метки, а iconCaption за описание самой метки, которое будет отображаться над меткой
За фильтрацию меток у нас будет отвечать ключ filter. В нашем случае значения будут shop и punkt
Пример в действии
Вы можете посмотреть данный пример в действии
Или скачать его
Ознакомиться более детально с API Яндекс карт вы можете на странице документации
На этом все, спасибо за внимание, если у вас возникли вопросы, пишите ниже в комментариях