Разделить кнопки zoom React yandex map 3.0

Рейтинг: 0Ответов: 1Опубликовано: 03.04.2023

Как я могу в React function component in yandex map 3.0, разделить кнопку zoom (так что бы они были отдельны друг от друга) или придется свои кнопки писать, тогда как определить обработчики на них?

reactjs yandex-maps-jsapi
Источник: Stack Overflow на русском

Ответы

▲ 0

Штатные контролы Яндекс и во второй версии API не давал кастомизировать. Если вам нужны собственные, придётся и делать самому. В базовом варианте кнопки масштаба можно собрать так:

const controls = new YMapControls({position: 'left'});
map.addChild(controls);

const buttons = new YMapCollection()
    .addChild(new YMapControlButton({text: '+', onClick: () => map.update({location:{zoom: map.zoom+1,duration: 500,}}) }))
    .addChild(new YMapControlButton({text: '–', onClick: () => map.update({location:{zoom: map.zoom-1,duration: 500,}}) }))

controls.addChild(buttons)

Ну или на базе примеров контролов Яндекса для Реакта код может выглядеть так:

    function App() {
      const [location, setLocation] = useState(LOCATION);

      const zoomPlus = React.useCallback(() => {
        setLocation({
          zoom: map.zoom + 1,
          duration: 500
        });
      });
      const zoomMinus = React.useCallback(() => {
        setLocation({
          zoom: map.zoom - 1,
          duration: 500
        });
      });

      return (
        <YMap location={location} ref={(x) => (map = x)}>
          <YMapDefaultSchemeLayer />
          <YMapDefaultFeaturesLayer />

          <YMapControls position="left">
            <YMapControlButton text="+" onClick={zoomPlus} />
            <YMapControlButton text="–" onClick={zoomMinus} />
          </YMapControls>
        </YMap>
      );
    }