Вывод объектов из 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 Яндекс карт вы можете на странице документации
На этом все, спасибо за внимание, если у вас возникли вопросы, пишите ниже в комментариях
Вывод постов из ВК на сайт PHP
В одном из наших проектов основное требование было, это вывод записей с сообщества VK на сайт.
Сам сайт соответственно был полностью на PHP (Не CMS). В данной статье разберемся, как вывести посты из сообщества вконтакте к себе на сайт.
Так же внимательно читайте официальную документацию VK API
Создаем приложение и получаем Token
Для того, чтобы создать приложение переходим в раздел Для разработчиков далее в Мои приложения и нажимаем кнопку Создать
Вводим название своего приложения, и в платформе выбираем Standalone-приложение
Затем нажимаем на кнопку Подключить приложение, потребуется подтверждение через телефон.
После подтверждения по желанию заполняем поля:
И сохраняем изменения
Далее переключаемся на вкладку Настройки где мы и получим наш Token (еще раз потребуется подтверждение через телефон)
Формируем запрос на получение данных
Далее представлен код, с помощью которого мы сформируем запрос на получение данных в виде ссылки
<?
$wall_id = "-20305928";
$group_id = preg_replace("/-/i", "", $wall_id); // Удаляем минус у ID групп, понадобится для ссылки.
$count = "50";
$token = "b91b4b99b91b4b99b91b4b992bb962e673bb91bb91b4b99d87dd0c77056182eda705cff";
$api_url = file_get_contents("https://api.vk.com/api.php?oauth=1&method=wall.get&owner_id={$wall_id}&count={$count}&v=5.131&access_token={$token}");
$response = json_decode($api_url, true);
?>Разберем код и рассмотрим главные параметры:
$wall_id — ID сообщества с которого будем выводить посты
$count — Количество выводимых постов
$token — Наш токен, который мы получали изначально (не забываем прописать свой)
$api_url — Формирование ссылки на запрос
$response — Преобразование JSON-строки в массив
Выводим посты на страницу
Выводить будем с использованием цикла foreach
<? foreach($response['response']['items'] as $post): ?>
<? if(isset($post['text'])): ?>
<div id="post<?=$post['id']?>" class="post-item">
<img src="<?=$post['attachments'][0]['photo']['sizes'][4]['url']?>" class="main-img" alt="">
<p class="post-text">
<?=$post['text']?>
</p>
<?=date("Y-m-d H:i:s", $post['date']);?><br />
<? echo '<a href="https://vk.com/wall-'.$group_id.'_'.$post['id'].'" target="_blank">https://vk.com/wall-'.$group_id.'_'.$post['id'].'</a>';?>
</div>
<? endif; ?>
<? endforeach; ?> В данном коде мы выводим посты на страницу, отображаем превью записи, текст записи, дату публикации и полную ссылку на запись. В качестве примера использовали нашу группу. Результат должен получиться вот такой:
На момент написания статьи использовалась последняя актуальная версия API 5.131
На этом все, спасибо за внимание, если у вас возникли вопросы, пишите ниже в комментариях