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

Question

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

Answer 1

Штатные контролы Яндекс и во второй версии 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>
      );
    }

БЛОГ НА HUSL

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

Ответы (1 шт):