gribnoysup / react-yandex-maps

Yandex Maps API bindings for React
MIT License
327 stars 116 forks source link

Как вызвать функцию panTo из своего компонента? #240

Closed alex-khramov closed 4 years ago

alex-khramov commented 4 years ago

Как плавно переместить карту от текущей точки до указанной, при клике на кнопку, используя собственный компонент?

Пример кода https://codesandbox.io/s/twilight-tdd-ll96h

mmarkelov commented 4 years ago

@taskway вам нужен объект карты.

import React, { useRef } from "react";
import { YMaps, Map } from "react-yandex-maps";
import "./styles.css";

const App = () => {
  const defaultState = {
    center: [55.751574, 37.573856],
    zoom: 10
  };
  const style = {
    width: "100%",
    height: "100vh"
  };

  const map = useRef();

  const myPanTo = coordinates => {
    map.current.panTo(coordinates);
  };

  return (
    <YMaps>
      <Map defaultState={defaultState} style={style} instanceRef={map} />
      <div className="myMenu">
        <ul>
          <li onClick={() => myPanTo([55.612392, 37.029242])}>Пункт 1</li>
          <li onClick={() => myPanTo([55.46989, 37.947974])}>Пункт 2</li>
          <li onClick={() => myPanTo([56.108996, 37.501654])}>Пункт 3</li>
        </ul>
      </div>
    </YMaps>
  );
};

export default App;
alex-khramov commented 4 years ago

Спасибо!