Как настроить метки в яндекс картах?

106

17 апреля 2022, 03:40

Как сделать чтобы при открытии балуна метка оставалась окрашенной? При закрытии балуна метки должны быть черными

ymaps.ready(init);
function init(){ 
  let myMap = new ymaps.Map('map', {
    center: [43.5797, 39.7309],
    zoom: 11,
    controls: ['fullscreenControl']
  });
  ymaps.option.presetStorage.add('mark#icon', {
    iconLayout: 'default#image',
    iconImageHref: 'https://i.ibb.co/NS09Wr2/mark.png',
    iconImageSize: [20, 20],
    iconImageOffset: [-10, -10],
  });
  ymaps.option.presetStorage.add('mark-hover#icon', {
    iconLayout: 'default#image',
    iconImageHref: 'https://i.ibb.co/d0X2QS0/mark-hover.png',
    iconImageSize: [20, 20],
    iconImageOffset: [-10, -10],
    hideIconOnBalloonOpen: false,
  });
  function getData() {
    return {
    "type": "FeatureCollection",
    "features": [
        {
            "type": "Feature",
            "id": 99,
            "geometry": {
                "type": "Point",
                "coordinates": [
                    "43.5797",
                    "39.7309"
                ]
            },
            "properties": {
                "balloonContentHeader": "1"
            },
            "options": {
                "preset": "mark#icon",
                "hideIconOnBalloonOpen": false
            }
        },
        {
            "type": "Feature",
            "id": 3,
            "geometry": {
                "type": "Point",
                "coordinates": [
                    "43.6288",
                    "39.7229"
                ]
            },
            "properties": {
                "balloonContentHeader": "2"
            },
            "options": {
                "preset": "mark#icon",
                "hideIconOnBalloonOpen": false
            }
        },
        {
            "type": "Feature",
            "id": 39,
            "geometry": {
                "type": "Point",
                "coordinates": [
                    "43.6312",
                    "39.7242"
                ]
            },
            "properties": {
                "balloonContentHeader": "3"
            },
            "options": {
                "preset": "mark#icon",
                "hideIconOnBalloonOpen": false
            }
        },
        {
            "type": "Feature",
            "id": 1,
            "geometry": {
                "type": "Point",
                "coordinates": [
                    "43.4556",
                    "39.912"
                ]
            },
            "properties": {
                "balloonContentHeader": "4"
            },
            "options": {
                "preset": "mark#icon",
                "hideIconOnBalloonOpen": false
            }
        },
        {
            "type": "Feature",
            "id": 1407,
            "geometry": {
                "type": "Point",
                "coordinates": [
                    "43.918",
                    "39.3192"
                ]
            },
            "properties": {
                "balloonContentHeader": "5"
            },
            "options": {
                "preset": "mark#icon",
                "hideIconOnBalloonOpen": false
            }
        },
        {
            "type": "Feature",
            "id": 776,
            "geometry": {
                "type": "Point",
                "coordinates": [
                    "43.5868",
                    "39.745"
                ]
            },
            "properties": {
                "balloonContentHeader": "6"
            },
            "options": {
                "preset": "mark#icon",
                "hideIconOnBalloonOpen": false
            }
        },
        {
            "type": "Feature",
            "id": 25,
            "geometry": {
                "type": "Point",
                "coordinates": [
                    "43.6242",
                    "39.7288"
                ]
            },
            "properties": {
                "balloonContentHeader": "7"
            },
            "options": {
                "preset": "mark#icon",
                "hideIconOnBalloonOpen": false
            }
        },
        {
            "type": "Feature",
            "id": 1089,
            "geometry": {
                "type": "Point",
                "coordinates": [
                    "43.459",
                    "39.9063"
                ]
            },
            "properties": {
                "balloonContentHeader": "8"
            },
            "options": {
                "preset": "mark#icon",
                "hideIconOnBalloonOpen": false
            }
        },
        {
            "type": "Feature",
            "id": 225,
            "geometry": {
                "type": "Point",
                "coordinates": [
                    "43.6222",
                    "39.7472"
                ]
            },
            "properties": {
                "balloonContentHeader": "9"
            },
            "options": {
                "preset": "mark#icon",
                "hideIconOnBalloonOpen": false
            }
        }
    ]
}
  }
  let objectManager = new ymaps.ObjectManager({
    clusterize: true
  });
  objectManager.add(getData());
  myMap.geoObjects.add(objectManager);
  objectManager.events
    .add(['mouseenter'], function(e) {
        objectManager.objects.setObjectOptions(e.get('objectId'), {
            preset: 'mark-hover#icon'
        });
    })
    .add(['mouseleave'], function(e) {
        objectManager.objects.setObjectOptions(e.get('objectId'), {
          preset: 'mark#icon'
        });
    })
    .add(['click'], function(e) {
        myMap.balloon.close();
    });
  // закрыть баллун
  myMap.events.add('click', function() {
    myMap.balloon.close();
    myMap.objectManager.set('preset', 'mark#icon');
  });  
}

#map {
  height: 500px;
  width: 500px;
}

<div id="map"></div>
<script src="https://api-maps.yandex.ru/2.1/?apikey=2e92f774-2de4-47e2-b8aa-8dfdbbf70a82&lang=ru_RU"></script>

Answer 1

Посмотрите, подправил ваш код

ymaps.ready(init);
function init(){ 
  let myMap = new ymaps.Map('map', {
    center: [43.5797, 39.7309],
    zoom: 11,
    controls: ['fullscreenControl']
  });
  ymaps.option.presetStorage.add('mark#icon', {
    iconLayout: 'default#image',
    iconImageHref: 'https://i.ibb.co/NS09Wr2/mark.png',
    iconImageSize: [20, 20],
    iconImageOffset: [-10, -10],
  });
  ymaps.option.presetStorage.add('mark-hover#icon', {
    iconLayout: 'default#image',
    iconImageHref: 'https://i.ibb.co/d0X2QS0/mark-hover.png',
    iconImageSize: [20, 20],
    iconImageOffset: [-10, -10],
    hideIconOnBalloonOpen: false,
  });
  function getData() {
    return {
    "type": "FeatureCollection",
    "features": [
        {
            "type": "Feature",
            "id": 99,
            "geometry": {
                "type": "Point",
                "coordinates": [
                    "43.5797",
                    "39.7309"
                ]
            },
            "properties": {
                "balloonContentHeader": "1"
            },
            "options": {
                "preset": "mark#icon",
                "hideIconOnBalloonOpen": false
            }
        },
        {
            "type": "Feature",
            "id": 3,
            "geometry": {
                "type": "Point",
                "coordinates": [
                    "43.6288",
                    "39.7229"
                ]
            },
            "properties": {
                "balloonContentHeader": "2"
            },
            "options": {
                "preset": "mark#icon",
                "hideIconOnBalloonOpen": false
            }
        },
        {
            "type": "Feature",
            "id": 39,
            "geometry": {
                "type": "Point",
                "coordinates": [
                    "43.6312",
                    "39.7242"
                ]
            },
            "properties": {
                "balloonContentHeader": "3"
            },
            "options": {
                "preset": "mark#icon",
                "hideIconOnBalloonOpen": false
            }
        },
        {
            "type": "Feature",
            "id": 1,
            "geometry": {
                "type": "Point",
                "coordinates": [
                    "43.4556",
                    "39.912"
                ]
            },
            "properties": {
                "balloonContentHeader": "4"
            },
            "options": {
                "preset": "mark#icon",
                "hideIconOnBalloonOpen": false
            }
        },
        {
            "type": "Feature",
            "id": 1407,
            "geometry": {
                "type": "Point",
                "coordinates": [
                    "43.918",
                    "39.3192"
                ]
            },
            "properties": {
                "balloonContentHeader": "5"
            },
            "options": {
                "preset": "mark#icon",
                "hideIconOnBalloonOpen": false
            }
        },
        {
            "type": "Feature",
            "id": 776,
            "geometry": {
                "type": "Point",
                "coordinates": [
                    "43.5868",
                    "39.745"
                ]
            },
            "properties": {
                "balloonContentHeader": "6"
            },
            "options": {
                "preset": "mark#icon",
                "hideIconOnBalloonOpen": false
            }
        },
        {
            "type": "Feature",
            "id": 25,
            "geometry": {
                "type": "Point",
                "coordinates": [
                    "43.6242",
                    "39.7288"
                ]
            },
            "properties": {
                "balloonContentHeader": "7"
            },
            "options": {
                "preset": "mark#icon",
                "hideIconOnBalloonOpen": false
            }
        },
        {
            "type": "Feature",
            "id": 1089,
            "geometry": {
                "type": "Point",
                "coordinates": [
                    "43.459",
                    "39.9063"
                ]
            },
            "properties": {
                "balloonContentHeader": "8"
            },
            "options": {
                "preset": "mark#icon",
                "hideIconOnBalloonOpen": false
            }
        },
        {
            "type": "Feature",
            "id": 225,
            "geometry": {
                "type": "Point",
                "coordinates": [
                    "43.6222",
                    "39.7472"
                ]
            },
            "properties": {
                "balloonContentHeader": "9"
            },
            "options": {
                "preset": "mark#icon",
                "hideIconOnBalloonOpen": false
            }
        }
    ]
}
  }
  let objectManager = new ymaps.ObjectManager({
    clusterize: true
  });
  objectManager.add(getData());
  myMap.geoObjects.add(objectManager);
  objectManager.events
    .add(['mouseenter'], function(e) {
        objectManager.objects.setObjectOptions(e.get('objectId'), {
            preset: 'mark-hover#icon'
        });
    })
    .add(['mouseleave'], function(e) {
        objectManager.objects.setObjectOptions(e.get('objectId'), {
          preset: 'mark#icon'
        });
    })
    .add(['click'], function(e) {
        myMap.balloon.close();
    });
  // закрыть баллун
  myMap.events.add('click', function() {
    myMap.balloon.close();
    myMap.objectManager.set('preset', 'mark#icon');
  });  
}

#map {
  height: 500px;
  width: 500px;
}

<div id="map"></div>
<script src="https://api-maps.yandex.ru/2.1/?apikey=2e92f774-2de4-47e2-b8aa-8dfdbbf70a82&lang=ru_RU"></script>

ymaps.ready(init);
function init(){ 
  let myMap = new ymaps.Map('map', {
    center: [43.5797, 39.7309],
    zoom: 11,
    controls: ['fullscreenControl']
  });
  ymaps.option.presetStorage.add('mark#icon', {
    iconLayout: 'default#image',
    iconImageHref: 'https://i.ibb.co/NS09Wr2/mark.png',
    iconImageSize: [20, 20],
    iconImageOffset: [-10, -10],
  });
  ymaps.option.presetStorage.add('mark-hover#icon', {
    iconLayout: 'default#image',
    iconImageHref: 'https://i.ibb.co/d0X2QS0/mark-hover.png',
    iconImageSize: [20, 20],
    iconImageOffset: [-10, -10],
    hideIconOnBalloonOpen: false,
  });
  function getData() {
    return {
    "type": "FeatureCollection",
    "features": [
        {
            "type": "Feature",
            "id": 99,
            "geometry": {
                "type": "Point",
                "coordinates": [
                    "43.5797",
                    "39.7309"
                ]
            },
            "properties": {
                "balloonContentHeader": "1"
            },
            "options": {
                "preset": "mark#icon",
                "hideIconOnBalloonOpen": false
            }
        },
        {
            "type": "Feature",
            "id": 3,
            "geometry": {
                "type": "Point",
                "coordinates": [
                    "43.6288",
                    "39.7229"
                ]
            },
            "properties": {
                "balloonContentHeader": "2"
            },
            "options": {
                "preset": "mark#icon",
                "hideIconOnBalloonOpen": false
            }
        },
        {
            "type": "Feature",
            "id": 39,
            "geometry": {
                "type": "Point",
                "coordinates": [
                    "43.6312",
                    "39.7242"
                ]
            },
            "properties": {
                "balloonContentHeader": "3"
            },
            "options": {
                "preset": "mark#icon",
                "hideIconOnBalloonOpen": false
            }
        },
        {
            "type": "Feature",
            "id": 1,
            "geometry": {
                "type": "Point",
                "coordinates": [
                    "43.4556",
                    "39.912"
                ]
            },
            "properties": {
                "balloonContentHeader": "4"
            },
            "options": {
                "preset": "mark#icon",
                "hideIconOnBalloonOpen": false
            }
        },
        {
            "type": "Feature",
            "id": 1407,
            "geometry": {
                "type": "Point",
                "coordinates": [
                    "43.918",
                    "39.3192"
                ]
            },
            "properties": {
                "balloonContentHeader": "5"
            },
            "options": {
                "preset": "mark#icon",
                "hideIconOnBalloonOpen": false
            }
        },
        {
            "type": "Feature",
            "id": 776,
            "geometry": {
                "type": "Point",
                "coordinates": [
                    "43.5868",
                    "39.745"
                ]
            },
            "properties": {
                "balloonContentHeader": "6"
            },
            "options": {
                "preset": "mark#icon",
                "hideIconOnBalloonOpen": false
            }
        },
        {
            "type": "Feature",
            "id": 25,
            "geometry": {
                "type": "Point",
                "coordinates": [
                    "43.6242",
                    "39.7288"
                ]
            },
            "properties": {
                "balloonContentHeader": "7"
            },
            "options": {
                "preset": "mark#icon",
                "hideIconOnBalloonOpen": false
            }
        },
        {
            "type": "Feature",
            "id": 1089,
            "geometry": {
                "type": "Point",
                "coordinates": [
                    "43.459",
                    "39.9063"
                ]
            },
            "properties": {
                "balloonContentHeader": "8"
            },
            "options": {
                "preset": "mark#icon",
                "hideIconOnBalloonOpen": false
            }
        },
        {
            "type": "Feature",
            "id": 225,
            "geometry": {
                "type": "Point",
                "coordinates": [
                    "43.6222",
                    "39.7472"
                ]
            },
            "properties": {
                "balloonContentHeader": "9"
            },
            "options": {
                "preset": "mark#icon",
                "hideIconOnBalloonOpen": false
            }
        }
    ]
}
  }
  let objectManager = new ymaps.ObjectManager({
    clusterize: true
  });
  objectManager.add(getData());
  myMap.geoObjects.add(objectManager);
  objectManager.events
    .add(['mouseenter'], function(e) {
        objectManager.objects.setObjectOptions(e.get('objectId'), {
            preset: 'mark-hover#icon'
        });
    })
    .add(['mouseleave'], function(e) {
      var objectId = e.get('objectId');
      if (!objectManager.objects.balloon.isOpen(objectId)) {
          objectManager.objects.setObjectOptions(objectId, {
          preset: 'mark#icon'
        });
      }        
    });
    
    objectManager.objects.events.add('click', function (e) {
      var objectId = e.get('objectId');
      objectManager.objects.setObjectOptions(objectId, {
        preset: 'mark-hover#icon'
      });
    });
    myMap.geoObjects.events.add('balloonclose', function (e) {
    var objectId = e.get('objectId');
      objectManager.objects.setObjectOptions(objectId, {
          preset: 'mark#icon'
        });
    });
}

#map {
  height: 500px;
  width: 500px;
}

<div id="map"></div>
<script src="https://api-maps.yandex.ru/2.1/?apikey=2e92f774-2de4-47e2-b8aa-8dfdbbf70a82&lang=ru_RU"></script>

Создание интернет-магазина игрушек в ABCname

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Взаимодействие с элементами другой страницы

Допустим есть две страницы, хранящиеся в одной папкеНа каждой странице есть по две кнопки

190

javascript

Решение задачи проходит 5/7 тестов [закрыт]

Хотите улучшить этот вопрос? Добавьте больше подробностей и уточните проблему, отредактировав это сообщение

101

javascript

Отладка node js через браузер. Visual Studio Code

Я пытаюсь запустить отладку через Visual Studio Code в браузере,но когда страница localhost открывается,с ней нет соединения

123

javascript

Цвет текста в зависимости от условия React

Имеется элемент <label htmlFor="inputUsername" >{(username) ?'V':'X' }</label> В зависимости от условия необходимо указать цвет возращенного значенияЕсли...

223