zhdoon
@zhdoon
Директор музея

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

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

Нужно направление к действию. Как это можно реализовать?
  • Вопрос задан
  • 236 просмотров
Решения вопроса 1
0xD34F
@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
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 2
freeExec
@freeExec
Участник OpenStreetMap
  1. Двигаем карту
  2. Получаем новые координаты центра
  3. Двигаем в них балун
Ответ написан
Комментировать
@Nevevr_Give_UP
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>
  );
}
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы