3

I'm trying to get address by coordinates using react-yandex-maps. I know how to do it in functional component. But I really need to use class component instead. I need to get ymaps. But have no idea how to do that. Couldn't find well-explained documentation for it.

Here is my code:

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>
        )
    }
}
Bakhrom
  • 195
  • 1
  • 3
  • 12

1 Answers1

1

if you are going to find coordinates of clicked place, you could get coordinates from Map component. It returns coordinates of clicked place like this

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

After updating state, you could put placemark using coordinates.

Abduqodir Gofurboyev
  • 41
  • 3