Доброго дня.
Разбираюсь с возможностями яндекс карты api.
И вот столкнулся с такой проблемой.
Есть карта на которую выводятся точки из ИБ.
А так же есть кастомный поиск из своего инпута по карте.
При каждом поиске идет добавление точки в коллекцию
myMap.geoObjects.add(placemark);
и по итогу пока страницу не обновлю все эти точки висят на карте.
Подскажите как сделать, чтобы при кажом новом поиске прошлый балун затирался?
Т.е. на карте постоянно активны те что выведены из ИБ и 1 от последнего поиска.
Вот весть скрипт текущего скрипта
ymaps.ready(init);
function init() {
const data = window.data_json;
// Создание экземпляра карты.
var myMap = new ymaps.Map('map', {
center: [53.893219, 30.35722],
zoom: 4,
controls: ['zoomControl']
}, {
searchControlProvider: 'yandex#search',
}),
// Контейнер для меню.
menu = $('<ul class="menu"></ul>');
for (var i = 0, l = data.length; i < l; i++) {
createMenuGroup(data[i]);
}
function createMenuGroup(group) {
let yandexCentr = [group.dotX, group.dotY];
// Пункт меню.
var menuItem = $('<li class="menu_item"><span>' + group.name + '<span></li>'),
// Коллекция для геообъектов группы.
collection = new ymaps.GeoObjectCollection(null, {}),
placemark = new ymaps.Placemark(yandexCentr, {
balloonContent: '<b>' + group.name + '</b><br/>' +
'<b>Телефон:</b></br><span>' + group.phone.join(" </br>") + '</span><br/><b>Описание:</b></br><span>' + group.description + '</span><br/>'
});
collection.add(placemark);
// Контейнер для подменю.
submenu = $('<ul class="submenu"></ul>');
// Добавляем коллекцию на карту.
myMap.geoObjects.add(collection);
//Обрабатываем клик по балуну
placemark.events.add('click', function () {
myMap.setCenter(yandexCentr);
myMap.setZoom(6);
});
// Добавляем подменю.
menuItem
.append(submenu)
// Добавляем пункт в меню.
.appendTo(menu)
// По клику удаляем/добавляем коллекцию на карту и скрываем/отображаем подменю.
.find('span')
.bind('click', function (e) {
myMap.setZoom(14);
myMap.setCenter(yandexCentr);
placemark.events.add('click', function (e) {
myMap.setCenter(yandexCentr);
myMap.setZoom(14);
});
if (!placemark.balloon.isOpen()) {
placemark.balloon.open();
} else {
placemark.balloon.close();
}
return false;
});
}
var suggestView = new ymaps.SuggestView('suggest'),
myMap,
placemark;
// При клике по кнопке запускаем верификацию введёных данных.
$("#suggest").keyup(function(event){ // поиск по Enter
if(event.keyCode == 13){
geocode();
}
});
function geocode() {
// Забираем запрос из поля ввода.
var request = $('#suggest').val();
// Геокодируем введённые данные.
ymaps.geocode(request).then(function (res) {
var obj = res.geoObjects.get(0),
error, hint;
if (obj) {
// Об оценке точности ответа геокодера можно прочитать тут: https://tech.yandex.ru/maps/doc/geocoder/desc/reference/precision-docpage/
switch (obj.properties.get('metaDataProperty.GeocoderMetaData.precision')) {
case 'exact':
break;
case 'number':
case 'near':
case 'range':
error = 'Уточните адрес';
break;
case 'street':
error = 'Уточните адрес';
break;
case 'other':
default:
error = 'Уточните адрес';
}
} else {
error = 'Уточните адрес';
}
// Если геокодер возвращает пустой массив или неточный результат, то показываем ошибку.
if (error) {
showError(error);
} else {
showResult(obj);
}
}, function (e) {
console.log(e)
})
}
function showResult(obj) {
// Удаляем сообщение об ошибке, если найденный адрес совпадает с поисковым запросом.
$('#suggest').removeClass('input_error');
$('#notice').css('visibility', 'hidden');
var mapContainer = $('#map'),
bounds = obj.properties.get('boundedBy'),
// Рассчитываем видимую область для текущего положения пользователя.
mapState = ymaps.util.bounds.getCenterAndZoom(
bounds,
[mapContainer.width(), mapContainer.height()]
),
// Сохраняем полный адрес для сообщения под картой.
address = [obj.getCountry(), obj.getAddressLine()].join(', '),
// Сохраняем укороченный адрес для подписи метки.
shortAddress = [obj.getThoroughfare(), obj.getPremiseNumber(), obj.getPremise()].join(' ');
// Убираем контролы с карты.
mapState.controls = [];
// Создаём карту.
createMap(mapState, shortAddress);
// Выводим сообщение под картой.
showMessage(address);
console.log(address);
console.log(shortAddress);
console.log();
}
function showError(message) {
$('#notice').text(message);
$('#suggest').addClass('input_error');
$('#notice').css('visibility', 'visible');
// Удаляем карту.
}
function createMap(state, caption) {
// Если карта еще не была создана, то создадим ее и добавим метку с адресом.
if (!myMap) {
myMap = new ymaps.Map('myMap', state);
placemark = new ymaps.Placemark(
myMap.getCenter(), {
iconCaption: caption,
balloonContent: caption
}, {
preset: 'islands#redDotIconWithCaption'
});
myMap.geoObjects.add(placemark);
// Если карта есть, то выставляем новый центр карты и меняем данные и позицию метки в соответствии с найденным адресом.
} else {
myMap.setCenter(state.center, state.zoom);
placemark = new ymaps.Placemark(
myMap.getCenter(), {
balloonContent:caption
}, {
preset: 'islands#redDotIconWithCaption'
});
myMap.geoObjects.add(placemark);
placemark.balloon.open();
}
}
// Добавляем меню в тэг с классом flex.
menu.appendTo($('.menu_title'));
// Выставляем масштаб карты чтобы были видны все группы.
myMap.setBounds(myMap.geoObjects.getBounds());
}
Простой