Как сделать, чтобы балун всегда находился в центре карты?

Question

[zhdoon]

Нужно сделать карту, как на Яндекс.Еде: балун всегда в центре карты, двигаем карту - балун стоит в центре, мы считываем его координаты.

Нужно направление к действию. Как это можно реализовать?

Answer 1

[0xD34F]

Если надо обновлять координаты после перемещения, то слушаете событие boundschange:

map.events.add('boundschange', function() {
  map.balloon.setPosition(map.getCenter());
});

Во время перемещения - слушаете actiontickcomplete:

map.events.add('actiontickcomplete', function(e) {
  const { globalPixelCenter, zoom } = e.get('tick');
  map.balloon.setPosition(map.options.get('projection').fromGlobalPixels(globalPixelCenter, zoom));
});

jsfiddle.net/da9ux62p/1

Answer 2

[freeExec]

1. Двигаем карту
   
2. Получаем новые координаты центра
   
3. Двигаем в них балун
   

Answer 3

[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>
  );
}