React.js - react-google-maps 事件返回

Question

我在 React 中使用 react-google-maps 包，但我很难从组件中获取 onDrag 事件。我的代码如下：

import React, {Component} from 'react';
import GoogleAddressAutocomplete from './googleaddressautocomplete.js';
import { withGoogleMap, GoogleMap, Marker } from "react-google-maps";
import axios from 'axios';
import NavWrapper from './navwrapper.js';

class MapPage extends Component {
    constructor(props) {
        super(props);
        this.state = {
            markers: {
                position: {
                    lat: 48.723627,
                    lng: 21.254199900000003,
                },
                key: Date.now(),
                defaultAnimation: 2,
            },
            mapCenter: { lat: 48.723627, lng: 21.254199900000003 },
            access_token: '',
            address: ''
        }
    }

    handleMapClick = this.handleMapClick.bind(this);
    handleMapDrag = this.handleMapDrag.bind(this);
    handleMapLoad = this.handleMapLoad.bind(this);

    handleMapClick(event) {
        let that = this;
        this.setState({
            markers: {
                position: event.latLng,
                defaultAnimation: 2,
                key: Date.now()
            },
            mapCenter: event.latLng
        });

    

    }

    handleAddressChange(latLngObject, address) {
        console.log('addr: => '+address);
    }

    handleMapDrag(event) {
        console.log(event);
    }

    handleMapLoad(event) {
        console.log(event);
    }

    render() {
        const GoogleMapWrapper = withGoogleMap(props => (
            <GoogleMap
                ref={props.onMapDrag}
                defaultZoom={13}
                defaultCenter={props.center}
                onClick={props.onMapClick}
                onDragEnd={props.onMapDrag}
            >
                <Marker {...props.markers} />
            </GoogleMap>
        ));

        return (
            <div className="row-100">
                <NavWrapper/>
                <GoogleAddressAutocomplete addressChange={this.handleAddressChange.bind(this)} address={this.state.address}/>
                <br />
                <GoogleMapWrapper
                    containerElement={
                        <div style={{ height: `50vh` }} />
                    }
                    mapElement={
                        <div style={{ height: `50vh` }} />
                    }
                    onMapClick={this.handleMapClick.bind(this)}
                    onMapDrag={this.handleMapDrag.bind(this)}
                    onMapLoad={this.handleMapLoad.bind(this)}
                    markers={this.state.markers}
                    center={this.state.mapCenter}
                />
            </div>
        )
    }
}

export default MapPage;

handleMapDrag(event) 函数仍然返回“未定义”。能否请你帮忙？拖动地图后，我需要在 onDragEnd 事件或 onDrag 事件本身上以 LatLng 格式获取地图的中心。

谢谢

Answer 1

所以解决方案是在实际实例上调用 lat&lng 函数，注意 GoogleMaps 对象上的 'ref' 属性，这对于正确的功能很重要。

import React, {Component} from 'react';
import GoogleAddressAutocomplete from './googleaddressautocomplete.js';
import { withGoogleMap, GoogleMap, Marker } from "react-google-maps";
import axios from 'axios';
import NavWrapper from './navwrapper.js';

class MapPage extends Component {
    constructor(props) {
        super(props);
        this.state = {
            markers: {
                position: {
                    lat: 48.723627,
                    lng: 21.254199900000003,
                },
                key: Date.now(),
                defaultAnimation: 2,
            },
            mapCenter: { lat: 48.723627, lng: 21.254199900000003 },
            access_token: '',
            address: '',
            mapRef: null
        }
    }

    componentWillMount() {
        
    }

    handleMapClick = this.handleMapClick.bind(this);
    handleMapDrag = this.handleMapDrag.bind(this);
    handleMapLoad = this.handleMapLoad.bind(this);

    handleMapClick(event) {
        let that = this;
        this.setState({
            markers: {
                position: event.latLng,
                defaultAnimation: 2,
                key: Date.now()
            },
            mapCenter: event.latLng
        });

    }

    handleAddressChange(latLngObject, address) {
        console.log('addr: => '+address);
    }

    handleMapDrag() {
        let mapRef = this._mapComponent;
        console.log(mapRef.getCenter().lat()+'; '+mapRef.getCenter().lng());
    }

    handleMapLoad(map) {
        this._mapComponent = map;
    }

    render() {
        const GoogleMapWrapper = withGoogleMap(props => (
            <GoogleMap
                ref={props.onMapLoad}
                defaultZoom={13}
                defaultCenter={props.center}
                onClick={props.onMapClick}
                onDragEnd={props.onDragEnd}
            >
                <Marker {...props.markers} />
            </GoogleMap>
        ));

        return (
            <div className="row-100">
                <NavWrapper/>
                <GoogleAddressAutocomplete addressChange={this.handleAddressChange.bind(this)} address={this.state.address}/>
                <br />
                <GoogleMapWrapper
                    containerElement={
                        <div style={{ height: `50vh` }} />
                    }
                    mapElement={
                        <div style={{ height: `50vh` }} />
                    }
                    onMapClick={this.handleMapClick}
                    onDragEnd={this.handleMapDrag}
                    onMapLoad={this.handleMapLoad}
                    markers={this.state.markers}
                    center={this.state.mapCenter}
                />
            </div>
        )
    }
}

export default MapPage;

地图的实际中心在 handleMapDrag() 函数中记录到控制台。

Answer 2

不返回那个，而是返回这个：

return (
        <div className="row-100">
            <NavWrapper/>
            <GoogleAddressAutocomplete addressChange={this.handleAddressChange.bind(this)} address={this.state.address}/>
            <br />
            <GoogleMapWrapper
                containerElement={
                    <div style={{ height: `50vh` }} />
                }
                mapElement={
                    <div style={{ height: `50vh` }} />
                }
                onMapClick={this.handleMapClick}
                onMapDrag={this.handleMapDrag}
                onMapLoad={this.handleMapLoad}
                markers={this.state.markers}
                center={this.state.mapCenter}
            />
        </div>
    )

您不需要在事件中再次将“this”绑定到方法，您只需调用它们即可。您只需要将 'this' 绑定到构造函数中的方法即可。

通过这个：

handleMapClick = this.handleMapClick.bind(this);
handleMapDrag = this.handleMapDrag.bind(this);
handleMapLoad = this.handleMapLoad.bind(this);

到构造函数。

不太确定，我没有多次使用 React，但我认为这些可能是问题所在。

希望对你有帮助。

Answer 3

您是否尝试将 onDragStart 提供给 GoogleMap 组件？