首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >根据react yandex-map中的坐标获取地址

根据react yandex-map中的坐标获取地址
EN

Stack Overflow用户
提问于 2020-10-31 20:29:47
回答 1查看 1.4K关注 0票数 3

我正试着用react地图通过坐标来获得地址。我知道如何在功能组件中这样做。但是我真的需要使用类组件来代替。我要去找马。但不知道该怎么做。找不到解释得很清楚的文件。

这是我的代码:

代码语言:javascript
运行
复制
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>
        )
    }
}
EN

回答 1

Stack Overflow用户

发布于 2022-11-30 06:20:51

如果要查找单击位置的坐标,可以从Map组件获取坐标。它返回点击位置的坐标,如下所示

代码语言:javascript
运行
复制
<Map onClick={(e)=>props.set(e._sourceEvent.originalEvent.coords)}/>

更新状态后,可以使用坐标放置placemark。

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/64626103

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档