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）函数仍返回'undefined'。能否请你帮忙？拖动地图后，我需要在LatDng格式中获取地图的中心，无论是在onDragEnd事件还是onDrag事件本身。

由于

Answer 1

不是返回，而是返回：

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 2

所以解决方法是在实际实例上调用lat＆amp; lng函数，注意＆＃39; ref＆＃39; GoogleMaps对象上的属性对于正常运行非常重要。

＆＃13;

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;

＆＃13;

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

Answer 3

你尝试过onDragStart到GoogleMap Component吗？

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

3 个答案: