Как зафиксировать метку на react yandex map и как определять адрес при перемещении карты под меткой?

Question

[Сергей]

Есть карта react-yandex-map. Сейчас при ее перемещении метка адреса движется вслед за ней. Необходимо фиксировать эту метку по центру карты, чтобы она стояла на месте, а карта двигалась под ней. При этом необходимо определять каждый раз адрес, на который указывает метка. Пример того, как должно работать - Яндекс Такси.

render() {
    const coordinates = this.props.coords;
    const mapData = {
      center: coordinates,
      zoom: 17,
      behaviors: ["default", "scrollZoom"],
      controls: [],
      yandexMapDisablePoiInteractivity: true,
    };

    const mapOptions = {
      iconLayout: "default#image",
      iconImageHref: mapIcon,
      iconImageSize: [30, 42],
      iconImageOffset: [-3, -42],
    };

    return (
      <YMaps>
        <Map
          defaultState={mapData}
          onLoad={(instance) => this.onLoadMap(instance)}
          modules={["geolocation", "geocode"]}
          instanceRef={this.props.instanceRef}
        >
          {[coordinates].map((coordinate) => (
            <Placemark
              geometry={coordinate}
              key={coordinate}
              options={mapOptions}
            />
          ))}
        </Map>
      </YMaps>
    );
  }

Answer 1

[freeExec]

https://yandex.ru/dev/maps/jsbox/2.1/dragger

Answer 2

[Ольга Стогова]

jsx:

import React, { useState } from "react";
import ReactDOM from "react-dom";
import { YMaps, Map } from "react-yandex-maps";

function App() {
  const [maps, setMaps] = useState(null);
  const [address, setAddress] = useState("");

  const getGeoLocation = (e) => {
    let coord = e.get("target").getCenter();

    let resp = maps.geocode(coord);
    resp.then((res) => {
      setAddress(res.geoObjects.get(0).getAddressLine());
    });
  };

  const onLoad = (map) => {
    setMaps(map);
  };

  return (
    <div className="App">
      <div className="center">тут разместить поинтер - указатель центра карты</div>
      <YMaps
        query={{
          apikey: PASTE_APIKEY
        }}
      >
        <Map
          defaultState={{
            center: [55.72506467778052, 37.596457118908944],
            zoom: 16
          }}
          width="500px"
          height="500px"
          onBoundsChange={(ymaps) => getGeoLocation(ymaps)}
          modules={["geolocation", "geocode"]}
          onLoad={(ymaps) => onLoad(ymaps)}
        ></Map>
        {address}
      </YMaps>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);