Muhammad Kuysunov

0xD34F 0xD34F Куратор тега JavaScript Спасибо тебе!
Сделал точь-в-точь)
При увеличении надо сделать плавнее и все
Позже если что ещё обновлю)

import React, { useRef, useState } from "react";
import { Box } from "@mui/system";
import { GeolocationControl, Map, Placemark } from "react-yandex-maps";
import locationIcon from "./locationIcon.png";

export function YMapsTest() {
  const [coords, setCoords] = useState([55.75, 37.57]);
  const placemarkerRef = useRef(null);

  console.log(coords);

  // RENDER
  return (
    <Box sx={{ p: 2, m: 2 }}>
      <Map
        state={{ center: coords, zoom: 9 }}
        width={600}
        height={400}
        onBoundsChange={(e) => {
          setCoords(e.originalEvent.map.getCenter());
        }}
        instanceRef={(ref) => {
          if (ref) {
            ref.events.add("actiontick", function (e) {
              const { globalPixelCenter, zoom } = e.get("tick");
              placemarkerRef.current.geometry.setCoordinates(
                ref.options.get("projection").fromGlobalPixels(globalPixelCenter, zoom)
              );
            });
          }
        }}
      >
        <Placemark
          geometry={coords}
          instanceRef={placemarkerRef}
          options={{
            draggable: true,
            iconLayout: "default#image",
            iconImageHref: locationIcon,
            iconImageSize: [30, 30],
          }}
        />
        <GeolocationControl />
      </Map>
    </Box>
  );
}