Блог

Я пытаюсь получить адрес по координатам с помощью react-yandex-maps. Я знаю, как это сделать в функциональном компоненте. Но мне действительно нужно использовать class component вместо этого. Мне нужно получить ymaps. Но понятия не имею, как это сделать. Не удалось найти хорошо объясненную документацию для этого.

Вот мой код:

 import React, { Component } from 'react'
import { YMaps, Map, ZoomControl, FullscreenControl, SearchControl, GeolocationControl, Placemark } from "react-yandex-maps";

export default class YMap extends Component {
    constructor(props) {
        super(props)
        this.state = {
            coords: [],
            mapState: {
                center: [41.2825125, 69.1392826],
                zoom: 9
            },
        }
    }

    componentDidUpdate(prevProps, prevState) {
        if (prevProps.oldCoords !== this.props.oldCoords) {
            this.setState({ coords: this.props.oldCoords })
        }
    }

    onMapClick = (e) => {
        const coords = e.get("coords");
        this.setState({ coords: coords })
    };

    render() {
        return (
            <div>
                <YMaps query={{ apikey: "" }}>
                    <Map
                        modules={["Placemark", "geocode", "geoObject.addon.balloon"]}
                        onClick={this.onMapClick}
                        state={this.state.mapState}
                        width='100%'
                        height='500px'
                    >
                        {this.state.coords ? <Placemark geometry={this.state.coords} /> : null}
                        <ZoomControl />
                        <FullscreenControl />
                        <SearchControl />
                        <GeolocationControl />
                    </Map>
                </YMaps>
            </div>
        )
    }
}
  

если вы собираетесь найти координаты места, на которое нажали, вы можете получить координаты из компонента Map. Он возвращает координаты выбранного места следующим образом

 <Map onClick={(e)=>props.set(e._sourceEvent.originalEvent.coords)}/>
  

После обновления состояния вы можете поставить метку, используя координаты.