How can I make the balloon always be in the center of the map?

Question

JavaScript

You need to make a map, like on Yandex.Food: the balloon is always in the center of the map, we move the map - the balloon is in the center, we read its coordinates.

You need a direction to take action. How can this be implemented?

Answer 1

If you need to update the coordinates after moving, then listen to the boundschange event:

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

While moving - listen to 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

1. Moving the map
   
2. Getting new center coordinates
   
3. We move a balloon in them
   

Answer 3

0xD34F 0xD34F JavaScript tag curator Thank you!
I did it exactly the same)
When you increase it, you need to make it smoother and everything
Later if I update something else)

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