React.js - react-google-maps events返信

Question

私はリアクションで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（イベント）関数は、まだ '未定義' を返します。助けてもらえますか？地図がドラッグされた後、onDragEndイベントまたはonDragイベントのいずれかで地図の中心をLatLng形式で取得する必要があります。

ありがとう

Answer 1

GoogleマップコンポーネントにonDragStartを渡してみましたか？

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'をバインドするだけで済みます。コンストラクタに

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

：

はこれを渡します。

私はリアクションで何度も働いていませんでしたが、それは問題かもしれないと思います。

希望します。

Answer 3

解決策は、実際のインスタンスのlat &関数を呼び出すことでした。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（）関数内のコンソールに記録されています。