Вот код кому интересно и есть время помочь https://codesandbox.io/s/l7oqnz7mml
2 ответа
Не знаю, как закрыть balloon корректно через API, но нашёл решение, которое работает в вашем случае:
function closeCurrentBalloon() {
let close = document.querySelector('ymaps[class$="-balloon__close-button"]');
if (close != null) {
close.click();
}
}
function App() {
return (
<div className="App">
<YMaps>
<Map state={mapState} onClick={closeCurrentBalloon}>
...
</Map>
</YMaps>
</div>
);
}
Для наглядности: https://codesandbox.io/s/react-yandex-maps-issue-101-9s5q1
-
1myMap.events.add('click', function (e) { myPlacemark.balloon.close(); });– ilyaCommented 15 мая 2020 в 15:34
-
Но я наверно плохо работаю с документацией и не получается перенести в React– ilyaCommented 15 мая 2020 в 15:35
-
-
А предложенный мной ранее вариант у вас работает? codesandbox.io/s/react-yandex-maps-issue-101-9s5q1 Commented 15 мая 2020 в 15:40
-
да, но есть возможность через api сделать... только что-то не выходит перенести благополучно в React– ilyaCommented 15 мая 2020 в 15:46
В реакте нужно получить instanceRef компонента YMap и Placemark, после навесить событие при клике на карту для закрытия балуна:
const [map, setMap] = useState();
const [placemark, setPlacemark] = useState();
useEffect(() => {
if (!map || !placemark) {
return;
}
map.events.add('click', () => placemark.balloon.close());
}, [map, placemark]);
<YMaps query={{load: 'package.full'}}>
<YMap
instanceRef={setMap}
{...yMapProps}
>
<Placemark
instanceRef={setPlacemark}
{...yMapPlacemarkProps}
>
</YMap>
</YMaps>