Как настроить разные иконки для объектов на карте Яндекса?
Мы используем API яндекс карт. В чем вопрос:
Есть PHP файл, который содержит код для отрисовки яндекс карты и объектов на ней. Вот он:
if(jQuery('#map_wrap').length){
try{
jQuery('#map_wrap').html('<div id="map"></div>');
var map_script = document.createElement('script');
map_script.src = '//api-maps.yandex.ru/2.1/?lang=ru_RU';
map_script.async = false;
document.head.appendChild(map_script);
map_script.onload = function() {
if (typeof ymaps!== 'undefined'){
jQuery('#map').addClass('map-cont-height');
ymaps.ready(init);
function init(){
var myMap = new ymaps.Map("map", {
center: map_center,
zoom: map_zoom,
controls: ['zoomControl', 'typeSelector', 'fullscreenControl'] // 'searchControl', 'searchControl',
}, {
searchControlProvider: 'yandex#search'
}),
objectManager = new ymaps.ObjectManager({
clusterize: true,
gridSize: 32,
clusterDisableClickZoom: true
});
myMap.behaviors.disable('scrollZoom');
if(typeof map_labels!== 'undefined'){
objectManager.objects.options.set('preset', map_labels_icon);
objectManager.clusters.options.set('preset', 'islands#darkGreenClusterIcons');
myMap.geoObjects.add(objectManager);
objectManager.add(map_labels);
}
jQuery('body').on('click', '.js-yamap-goto', function(){
scrollbodytoel(jQuery('#map_wrap'),topscroll_reserve);
myMap.setCenter( jQuery(this).data('point'), 18);
});
}
}
}
}catch(err){}
}
Есть JS файл с кодом, который проверяет и добавляет на определенной странице объекты на карту. Вот он:
let map_labels = {
"type": "FeatureCollection",
"features": [<?
require_once(ROOTPATH.'/data-a/partners.php');
foreach($c_c['trade-service-partners'] as $key=>$partner){
if( $partner[12]===1 && $partner[8]===1 ){
echo '{';
echo '"type": "Feature",';
echo '"id": '.$key.',';
echo '"geometry": {"type": "Point", "coordinates": '.htmlspecialchars($partner[3]).'},';
echo '"properties": {';
echo '"clusterCaption": "'.htmlspecialchars($partner[1]).'",';
echo '"hintContent": "'.htmlspecialchars($partner[1]).', '.htmlspecialchars($partner[6]).'",';
echo '"balloonContentHeader": "<font size=3>'.htmlspecialchars($partner[6]).'</font>",';
echo '"balloonContentBody": "';
echo '<p><font size=3>'.htmlspecialchars($partner[6]).'</font></p>';
echo '<p>'.htmlspecialchars($partner[1]).', '.htmlspecialchars($partner[2]).'<br/>('.htmlspecialchars($c_c['sub-regs'][$partner[0]]['name']).')</p>';
foreach($partner[4] as $phone){
if(isset($phone[2])){
switch($phone[2]){
case 'whatsapp':
echo '<p>WhatsApp: '.htmlspecialchars($phone[1]).'</p>';
break;
}
}else{
echo '<p>Тел.: <a href=\"tel:'.htmlspecialchars($phone[0]).'\">'.htmlspecialchars($phone[1]).'</a></p>';
}
}
if( $partner[5][0] !== '' ){ echo '<p>Веб-сайт: <a href=\"'.htmlspecialchars($partner[5][0]).'\" target=\"_blank\">'.htmlspecialchars($partner[5][1]).'</a></p>'; }
echo '",';
echo '}';
echo '},';
}
}
?>
]
},
map_labels_icon = 'islands#darkGreenRepairShopIcon';
Код устанавливает для определенных объектов (из массива Partners) на карте определенную иконку из базы Яндекс Карт (map_labels_icon = 'islands#darkGreenShoppingIcon';)
Мне нужно переписать код, чтобы была возможность на одну карту добавлять несколько разных объектов из одного массива Partners, но с разными иконками (например добавить такие же иконки но красного цвета для определенных элементов (map_labels_icon = 'islands#redShoppingIcon'), однако как я не пытался, не могу встроить дополнительные условия для переменной map_labels_icon - карта просто пропадает со страницы.
Что делаю не так?
Ответы (2 шт):
В таком случае для каждого объекта нужно прописать персональный preset по условию. Это делается в options. Примерно так:
...
echo '{';
echo '"type": "Feature",';
echo '"id": '.$key.',';
echo '"geometry": {"type": "Point", "coordinates": '.htmlspecialchars($partner[3]).'},';
?>
options: {
preset: '<?= partner[100] == 1 ? "islands#darkGreenShoppingIcon" : "islands#redShoppingIcon" ?>',
},
<?
echo '"properties": {';
echo '"clusterCaption": "'.htmlspecialchars($partner[1]).'",';
echo '"hintContent": "'.htmlspecialchars($partner[1]).', '.htmlspecialchars($partner[6]).'",';
echo '"balloonContentHeader": "<font size=3>'.htmlspecialchars($partner[6]).'</font>",';
echo '"balloonContentBody": "';
...
А задание общей иконки - убрать
Получилось в итоге так:
let map_labels = {
"type": "FeatureCollection",
"features": [
<?php
require_once(ROOTPATH.'/data-a/partners.php');
foreach($c_c['trade-service-partners'] as $key => $partner) {
if ($partner[12] === 1 && $partner[8] === 1) {
// Выбор иконки в зависимости от значения $partner[13]
if ($partner[13] === 1) {
$preset = 'islands#violetRepairShopIcon';
} else {
$preset = 'islands#darkGreenRepairShopIcon';
}
echo '{';
echo '"type": "Feature",';
echo '"id": ' . $key . ',';
echo '"geometry": {"type": "Point", "coordinates": ' . htmlspecialchars($partner[3]) . '},';
echo '"options": {' . '"preset": "' . $preset . '"},';
echo '"properties": {';
echo '"clusterCaption": "' . htmlspecialchars($partner[1]) . '",';
echo '"hintContent": "' . htmlspecialchars($partner[1]) . ', ' . htmlspecialchars($partner[6]) . '",';
echo '"balloonContentHeader": "<font size=3>' . htmlspecialchars($partner[6]) . '</font>",';
echo '"balloonContentBody": "';
echo '<p><font size=3>' . htmlspecialchars($partner[6]) . '</font></p>';
echo '<p>' . htmlspecialchars($partner[1]) . ', ' . htmlspecialchars($partner[2]) . '<br/>(' . htmlspecialchars($c_c['sub-regs'][$partner[0]]['name']) . ')</p>';
foreach($partner[4] as $phone) {
if(isset($phone[2])) {
if($phone[2] == 'whatsapp') {
echo '<p>WhatsApp: ' . htmlspecialchars($phone[1]) . '</p>';
}
} else {
echo '<p>Тел.: <a href=\"tel:' . htmlspecialchars($phone[0]) . '\">' . htmlspecialchars($phone[1]) . '</a></p>';
}
}
if ($partner[5][0] !== '') {
echo '<p>Веб-сайт: <a href=\"' . htmlspecialchars($partner[5][0]) . '\" target=\"_blank\">' . htmlspecialchars($partner[5][1]) . '</a></p>';
}
if ($partner[13] === 1) {
echo '<p><b>Есть склад запчастей</b></p>'; }
echo '"}';
echo '},';
}
}
?>
],
};
Добавил проверку А в файле где описан основной метод убрал из блока
if(typeof map_labels!== 'undefined'){
objectManager.clusters.options.set('preset', 'islands#darkGreenClusterIcons');
myMap.geoObjects.add(objectManager);
objectManager.add(map_labels);
}
строчку:
objectManager.objects.options.set('preset', map_labels_icon);
И в итоге заработало