Всем привет. Про API яндекс карт узнал на прошлой неделе после того как встала определенная задача, нужно было вывести на карту N-количество полигонов, но что бы координаты этих полигонов задавались не в ручную, а брались из свойств инфоблоков Битрикса. С этим как то справился, вот код того что получилось:
<? if(!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true)die();
use \Bitrix\Main\Localization\Loc;
{
?>
<script src="https://api-maps.yandex.ru/2.1?apikey=(Тут был мой ключ)&lang=ru_RU"
type="text/javascript"></script>
<script type="text/javascript">
ymaps.ready(function () {
// Создание экземпляра карты и его привязка к контейнеру с заданным id ("map")
var myMap = new ymaps.Map('map',
{
center: [48.48, 135.08],
zoom: 14,
controls: ['zoomControl', 'typeSelector', 'fullscreenControl'] // "Элементы управления (Зум, слои, фулскрин)
})
<?foreach ($arResult as $item) { if (!empty($item["PREVIEW_PICTURE"])) {
?>
<? if($counter_i == count($arResult)) { echo ";"; } else { echo ","; $counter_i++;} ?>
<?
} else {
//Цвет заливки
if(!empty($item['PROPERTY_COLORIMGPLACE_VALUE'])) {
$iconColor = $item['PROPERTY_COLORIMGPLACE_VALUE'];
} else {
$iconColor = '65dbc653'; //Если цвет не задан, то будет этот.
}
//Цвет обводки
if(!empty($item['PROPERTY_COLORSTROKE_VALUE'])) {
$strokeColor = $item['PROPERTY_COLORSTROKE_VALUE'];
} else {
$strokeColor = '1102b8e2'; //Если цвет не задан, то будет этот.
}
$body = '';
?>
// Построение полигона
Polygon<?=$item['ID']?> = new ymaps.Polygon(
[[<?=$item['PROPERTY_MESTO_VALUE']?>]], // Получение координат
{
// Содержимое балуна
balloonContentHeader: '<a href="https:ссылка/"><?=$item['NAME']?></a>', // Заголовок
balloonContent: '<b>Куратор: </b>' + '<?=$item['PROPERTY_BALOON_VALUE']["TEXT"]?><br/>' + '<b>Адрес: </b>' + '<?=$item['PROPERTY_ADRESS_VALUE']?><br/>' + '<b>Район: </b>' + '<?=$item['PROPERTY_RAION_VALUE']?><br/>' + '<b>Дата создания: </b>' + '<?=$item['PROPERTY_DATE_CREATE_VALUE']?><br/>', // Содержимое
balloonContentFooter: 'Телефон: </b>' + '<?=$item['PROPERTY_CONTACTS_VALUE']["TEXT"]?>', // Футер
clusterCaption: "<?=$item['PROPERTY_RAION_VALUE']?>", // Кластер объекта
hintContent: "<?=$item['NAME']?>" // Подсказка объекта
}, {
fillColor: '<?=$iconColor?>', // Цвет заливки
fillOpacity: 0.45, // Прозрачность заливки
strokeColor: '<?=$strokeColor?>', // Цвет обводки
strokeWidth: 2, // Толщина обводки
strokeOpacity: 0.5 // Прозрачность обводки
})<? if($counter_i == count($arResult)) { echo ";"; } else { echo ","; $counter_i++;} ?>
<? } //endif?>
<? } //endforeach?>
<?
foreach ($arResult as $item) {
echo "myMap.geoObjects.add(Polygon".$item['ID'].");"; // Добавлени полигонов на карту
}
?>
});
</script>
<div id="map" style="width: <?= $arParams['mapWidht'] ?>; height: <?= $arParams['mapHeight'] ?>"></div>
<?
}
?>
Все отлично работает, полигоны появляются их описание тоже.
Но тут встала следующая задача, сделать так что бы можно было фильтровать эти полигона по районам "центр, северный, южный". Нашел в инструкции яндекса как это делать, но вот там что бы это реализовать массив полигонов должен задаваться в отдельном файле и имеет такой вид:
Мне такой способ совсем не подходит ибо добавление объектов должно происходить разными людьми и периодически карта будет изменятся.
Затем через несколько часов поисков нашел еще один вроде как подходящий способ, он заключается в создании чекбоксов на страницы и с помощью их делать выборку по карте.
Вот код того что получилось:
<? if(!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true)die();
use \Bitrix\Main\Localization\Loc;
{
?>
<script src="https://api-maps.yandex.ru/2.1?apikey=(Тут был мой ключ)&lang=ru_RU"
type="text/javascript">
</script>
<script type="text/javascript">
ymaps.ready(function () {
// Создание экземпляра карты и его привязка к контейнеру с заданным id ("map")
var myMap = new ymaps.Map('map',
{
center: [48.48, 135.08],
zoom: 13,
controls: ['zoomControl', 'typeSelector', 'fullscreenControl'] // "Элементы управления (Зум, слои, фулскрин)
});
// Функция, которая по состоянию чекбоксов в меню показывает или скрывает геообъекты из выборки.
function checkState () {
var shownObjects,
byСluster = new ymaps.GeoQueryResult();
// Отберем объекты по форме.
if ($('#Железнодорожный').prop('checked')) {
byСluster = myObjects.search('clusterCaption = "Железнодорожный"');
}
if ($('#Индустриальный').prop('checked')) {
byСluster = myObjects.search('clusterCaption = "Индустриальный"').add(byСluster);
}
if ($('#Кировский').prop('checked')) {
byСluster = myObjects.search('clusterCaption = "Кировский"').add(byСluster);
}
// Мы отобрали объекты по цвету и по форме. Покажем на карте объекты которые совмещают нужные признаки.
shownObjects = byСluster.addToMap(myMap);
// Объекты, которые не попали в выборку, нужно убрать с карты.
myObjects.remove(shownObjects).removeFromMap(myMap);
}
$('#Железнодорожный').click(checkState);
$('#Индустриальный').click(checkState);
$('#Кировский').click(checkState);
<?foreach ($arResult as $item) { if (!empty($item["PREVIEW_PICTURE"])) {
?>
<? if($counter_i == count($arResult)) { echo ";"; } else { echo ","; $counter_i++;} ?>
<?
} else {
//Цвет заливки
if(!empty($item['PROPERTY_COLORIMGPLACE_VALUE'])) {
$iconColor = $item['PROPERTY_COLORIMGPLACE_VALUE'];
} else {
$iconColor = '65dbc653'; //Если цвет не задан, то будет этот.
}
//Цвет обводки
if(!empty($item['PROPERTY_COLORSTROKE_VALUE'])) {
$strokeColor = $item['PROPERTY_COLORSTROKE_VALUE'];
} else {
$strokeColor = '1102b8e2'; //Если цвет не задан, то будет этот.
}
$body = '';
?>
// Построение полигона
Polygon<?=$item['ID']?> = new ymaps.Polygon(
[[<?=$item['PROPERTY_MESTO_VALUE']?>]], // Получение координат
{
// Содержимое балуна
balloonContentHeader: '<a href="https:ссылка"><?=$item['NAME']?></a>', // Заголовок
balloonContent: '<b>Куратор: </b>' + '<?=$item['PROPERTY_BALOON_VALUE']["TEXT"]?><br/>' + '<b>Адрес: </b>' + '<?=$item['PROPERTY_ADRESS_VALUE']?><br/>' + '<b>Район: </b>' + '<?=$item['PROPERTY_RAION_VALUE']?><br/>' + '<b>Дата создания: </b>' + '<?=$item['PROPERTY_DATE_CREATE_VALUE']?><br/>', // Содержимое
balloonContentFooter: 'Телефон: </b>' + '<?=$item['PROPERTY_CONTACTS_VALUE']["TEXT"]?>', // Футер
clusterCaption: "<?=$item['PROPERTY_RAION_VALUE']?>", // Кластер объекта
hintContent: "<?=$item['NAME']?>" // Подсказка объекта
}, {
fillColor: '<?=$iconColor?>', // Цвет заливки
fillOpacity: 0.45, // Прозрачность заливки
strokeColor: '<?=$strokeColor?>', // Цвет обводки
strokeWidth: 2, // Толщина обводки
strokeOpacity: 0.5 // Прозрачность обводки
})<? if($counter_i == count($arResult)) { echo ";"; } else { echo ","; $counter_i++;} ?>
<? } //endif?>
<? } //endforeach?>
<?
foreach ($arResult as $item) {
echo "myMap.geoObjects.add(Polygon".$item['ID'].");"; // Добавлени полигонов на карту
}
?>
})
</script>
<div id="map" style="width: <?= $arParams['mapWidht'] ?>; height: <?= $arParams['mapHeight'] ?>"></div>
<?
}
?>
Но вот почему то ничего фильтровать у меня не хочет. То -ли как говорится я дурак, то-ли лыжи не едут. Подскажите в какую сторону вообще копать то? Вот ссылка на пример из песочницы яндекса
Так же нужно реализовать поиск, что бы при вводе адреса в строку поиска загоралось содержимое того полигона в котором этот дом попал. То есть что то типа эмуляции нажатия на карту по адресу. Это копать пока вообще страшно...
Дополняю сообщение примером работы скрипта, это первый вариант кода, который я описал в начале сообщения:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>Многоугольник</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="https://api-maps.yandex.ru/2.1/?lang=ru_RU&apikey=3261ce08-c60a-4114-96f8-ce820abf124a" type="text/javascript"></script>
<script type="text/javascript">
ymaps.ready(function() {
// Создание экземпляра карты и его привязка к контейнеру с заданным id ("map")
var myMap = new ymaps.Map('map', {
center: [48.48, 135.08],
zoom: 12,
controls: ['zoomControl', 'typeSelector', 'fullscreenControl'] // "Элементы управления (Зум, слои, фулскрин)
}),
objectManager = new ymaps.ObjectManager({
// Кластеризация меток
clusterize: true
});
myMap.geoObjects.add(objectManager);
// Создание списка районов (фильтров).
var listBoxItems = ['Железнодорожный', 'Индустриальный', 'Кировский', 'Краснафлотский', 'Центральный']
.map(function(title) {
return new ymaps.control.ListBoxItem({
data: {
content: title
},
state: {
selected: true
}
})
}),
reducer = function(filters, filter) {
filters[filter.data.get('content')] = filter.isSelected();
return filters;
},
// Теперь создадим список из 5 пунктов "районов".
listBoxControl = new ymaps.control.ListBox({
data: {
content: 'Районы',
title: 'Фильтр по районам'
},
items: listBoxItems,
state: {
expanded: false, // Список по умолчанию свёрнутый
filters: listBoxItems.reduce(reducer, {})
}
});
myMap.controls.add(listBoxControl);
// Добавим отслеживание изменения признака, выбран ли пункт списка.
listBoxControl.events.add(['select', 'deselect'], function(e) {
var listBoxItem = e.get('target');
var filters = ymaps.util.extend({}, listBoxControl.state.get('filters'));
filters[listBoxItem.data.get('content')] = listBoxItem.isSelected();
listBoxControl.state.set('filters', filters);
});
// Отслеживание изменений в элементе управления.список.государственное поле.
var filterMonitor = new ymaps.Monitor(listBoxControl.state);
filterMonitor.add('filters', function(filters) {
// Применим фильтр.
objectManager.setFilter(getFilterFunction(filters));
});
function getFilterFunction(categories) {
return function(obj) {
var content = obj.properties.balloonContent;
return categories[content]
}
}
$.ajax({
url: "data.json"
}).done(function(data) {
objectManager.add(data);
});
// Построение полигона
Polygon106497 = new ymaps.Polygon(
[
[
[48.4872099152, 135.044750889],
[48.4865858624, 135.045233687],
[48.4863005786, 135.044150075],
[48.4869567290, 135.043726286],
[48.4872099152, 135.044750889]
]
], // Получение координат
{
// Содержимое балуна
balloonContentHeader: '<a href="https://ссылка/">ТОС "Виктория"</a>', // Заголовок
balloonContent: '<b>Куратор: </b>' + 'Имя<br/>' + '<b>Адрес: </b>' + 'адрес<br/>' + '<b>Район: </b>' + 'Кировский<br/>' + '<b>Дата создания: </b>' + '10.02.2020<br/>', // Содержимое
balloonContentFooter: 'Телефон: </b>' + 'цифры', // Футер
clusterCaption: "Кировский", // Кластер объекта
hintContent: "ТОС "Виктория"" // Подсказка объекта
}, {
fillColor: 'ff0000', // Цвет заливки
fillOpacity: 0.45, // Прозрачность заливки
strokeColor: '020202', // Цвет обводки
strokeWidth: 2, // Толщина обводки
strokeOpacity: 0.5 // Прозрачность обводки
}),
// Построение полигона
Polygon106500 = new ymaps.Polygon(
[
[
[48.5206, 135.107],
[48.5215, 135.108],
[48.5217, 135.107],
[48.5217, 135.107],
[48.5212, 135.106],
[48.5206, 135.107]
]
], // Получение координат
{
// Содержимое балуна
balloonContentHeader: '<a href="https://ссылка/">ТОС "Максимум Света"</a>', // Заголовок
balloonContent: '<b>Куратор: </b>' + 'имя<br/>' + '<b>Адрес: </b>' + 'пер. Краснодарский, дом 19а<br/>' + '<b>Район: </b>' + 'Железнодорожный<br/>' + '<b>Дата создания: </b>' + '11.02.2020<br/>', // Содержимое
balloonContentFooter: 'Телефон: </b>' + 'цифры', // Футер
clusterCaption: "Железнодорожный", // Кластер объекта
hintContent: "ТОС "Максимум Света"" // Подсказка объекта
}, {
fillColor: '4cd46365', // Цвет заливки
fillOpacity: 0.45, // Прозрачность заливки
strokeColor: '525252c3', // Цвет обводки
strokeWidth: 2, // Толщина обводки
strokeOpacity: 0.5 // Прозрачность обводки
}),
// Построение полигона
Polygon121371 = new ymaps.Polygon(
[
[
[48.4751158751, 135.061937151],
[48.4765480869, 135.064731156],
[48.4703986385, 135.073185479],
[48.4690278941, 135.070227689],
[48.4751158751, 135.061937151]
]
], // Получение координат
{
// Содержимое балуна
balloonContentHeader: '<a href="https://ссылка">ТОС "Камская 6"</a>', // Заголовок
balloonContent: '<b>Куратор: </b>' + '<br/>' + '<b>Адрес: </b>' + 'ул. Камская, дом 6<br/>' + '<b>Район: </b>' + '<br/>' + '<b>Дата создания: </b>' + '13.02.2020<br/>', // Содержимое
balloonContentFooter: 'Телефон: </b>' + '', // Футер
clusterCaption: "Южный", // Кластер объекта
hintContent: "ТОС "Камская 6"" // Подсказка объекта
}, {
fillColor: '99fc99', // Цвет заливки
fillOpacity: 0.45, // Прозрачность заливки
strokeColor: 'ff007f', // Цвет обводки
strokeWidth: 2, // Толщина обводки
strokeOpacity: 0.5 // Прозрачность обводки
}),
myMap.geoObjects.add(Polygon106497);
myMap.geoObjects.add(Polygon106500);
myMap.geoObjects.add(Polygon121371);
});
</script>
<style>
html,
body,
#map {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
</style>
</head>
<body>
<div id="map"></div>
</body>
</html>
В данном примере я так понимаю ничего не работает изза этого куска кода:
$.ajax({
url: "data.json"
}).done(function(data) {
objectManager.add(data);
});
Если я правильно понимаю то тут подключается база "data.json" но у меня получение координат построено подругому.
А вот пример второго кода, но редакторе при клике на чекбокс выдает какую то ошибку, пока не понял с чем она связана, завтра еще с ПК попробую посмотреть, сейчас с виснущего нетбука не совсем удобно, возможно в этой ошибке проблема и кроется
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>Многоугольник</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="https://api-maps.yandex.ru/2.1/?lang=ru_RU&apikey=3261ce08-c60a-4114-96f8-ce820abf124a" type="text/javascript"></script>
<script type="text/javascript">
ymaps.ready(function() {
// Создание экземпляра карты и его привязка к контейнеру с заданным id ("map")
var myMap = new ymaps.Map('map', {
center: [48.48, 135.08],
zoom: 12,
controls: ['zoomControl', 'typeSelector', 'fullscreenControl'] // "Элементы управления (Зум, слои, фулскрин)
});
// Функция, которая по состоянию чекбоксов в меню показывает или скрывает геообъекты из выборки.
function checkState() {
var shownObjects,
byСluster = new ymaps.GeoQueryResult();
// Отберем объекты по кластеру.
if ($('#jdr').prop('checked')) {
byСluster = geoObjects.search('clusterCaption = "Железнодорожный"');
}
if ($('#industr').prop('checked')) {
byСluster = geoObjects.search('clusterCaption = "Индустриальный"').add(byСluster);
}
if ($('#kirov').prop('checked')) {
byСluster = geoObjects.search('clusterCaption = "Кировский"').add(byСluster);
}
// Мы отобрали объекты по кластеру. Покажем на карте объекты которые совмещают нужные признаки.
shownObjects = byСluster.addToMap(myMap);
// Объекты, которые не попали в выборку, нужно убрать с карты.
geoObjects.remove(shownObjects).removeFromMap(myMap);
}
$('#jdr').click(checkState);
$('#industr').click(checkState);
$('#kirov').click(checkState);
// Построение полигона
Polygon106497 = new ymaps.Polygon(
[
[
[48.4872099152, 135.044750889],
[48.4865858624, 135.045233687],
[48.4863005786, 135.044150075],
[48.4869567290, 135.043726286],
[48.4872099152, 135.044750889]
]
], // Получение координат
{
// Содержимое балуна
balloonContentHeader: '<a href="https://ссылка/">ТОС "Виктория"</a>', // Заголовок
balloonContent: '<b>Куратор: </b>' + 'Имя<br/>' + '<b>Адрес: </b>' + 'адрес<br/>' + '<b>Район: </b>' + 'Кировский<br/>' + '<b>Дата создания: </b>' + '10.02.2020<br/>', // Содержимое
balloonContentFooter: 'Телефон: </b>' + 'цифры', // Футер
clusterCaption: "Кировский", // Кластер объекта
hintContent: "ТОС "Виктория"" // Подсказка объекта
}, {
fillColor: 'ff0000', // Цвет заливки
fillOpacity: 0.45, // Прозрачность заливки
strokeColor: '020202', // Цвет обводки
strokeWidth: 2, // Толщина обводки
strokeOpacity: 0.5 // Прозрачность обводки
}),
// Построение полигона
Polygon106500 = new ymaps.Polygon(
[
[
[48.5206, 135.107],
[48.5215, 135.108],
[48.5217, 135.107],
[48.5217, 135.107],
[48.5212, 135.106],
[48.5206, 135.107]
]
], // Получение координат
{
// Содержимое балуна
balloonContentHeader: '<a href="https://ссылка/">ТОС "Максимум Света"</a>', // Заголовок
balloonContent: '<b>Куратор: </b>' + 'имя<br/>' + '<b>Адрес: </b>' + 'пер. Краснодарский, дом 19а<br/>' + '<b>Район: </b>' + 'Железнодорожный<br/>' + '<b>Дата создания: </b>' + '11.02.2020<br/>', // Содержимое
balloonContentFooter: 'Телефон: </b>' + 'цифры', // Футер
clusterCaption: "Железнодорожный", // Кластер объекта
hintContent: "ТОС "Максимум Света"" // Подсказка объекта
}, {
fillColor: '4cd46365', // Цвет заливки
fillOpacity: 0.45, // Прозрачность заливки
strokeColor: '525252c3', // Цвет обводки
strokeWidth: 2, // Толщина обводки
strokeOpacity: 0.5 // Прозрачность обводки
}),
// Построение полигона
Polygon121371 = new ymaps.Polygon(
[
[
[48.4751158751, 135.061937151],
[48.4765480869, 135.064731156],
[48.4703986385, 135.073185479],
[48.4690278941, 135.070227689],
[48.4751158751, 135.061937151]
]
], // Получение координат
{
// Содержимое балуна
balloonContentHeader: '<a href="https://ссылка">ТОС "Камская 6"</a>', // Заголовок
balloonContent: '<b>Куратор: </b>' + '<br/>' + '<b>Адрес: </b>' + 'ул. Камская, дом 6<br/>' + '<b>Район: </b>' + '<br/>' + '<b>Дата создания: </b>' + '13.02.2020<br/>', // Содержимое
balloonContentFooter: 'Телефон: </b>' + '', // Футер
clusterCaption: "Южный", // Кластер объекта
hintContent: "ТОС "Камская 6"" // Подсказка объекта
}, {
fillColor: '99fc99', // Цвет заливки
fillOpacity: 0.45, // Прозрачность заливки
strokeColor: 'ff007f', // Цвет обводки
strokeWidth: 2, // Толщина обводки
strokeOpacity: 0.5 // Прозрачность обводки
}),
myMap.geoObjects.add(Polygon106497);
myMap.geoObjects.add(Polygon106500);
myMap.geoObjects.add(Polygon121371);
});
</script>
<style>
html,
body,
#map {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
</style>
</head>
<body>
<div id="map"></div>
<div style="padding: 5px;">
<div>
Фильтр по Районам <br>
<input type='checkbox' id='jdr' checked=true>Железнодорожный</input><br>
<input type='checkbox' id='industr' checked=true>Индустриальный</input><br>
<input type='checkbox' id='kirov' checked=true>Кировский</input>
</div>
</div>
</body>
</html>