मैंने कोशिश की:

<GoogleMap
  defaultZoom={14}
  center={{lat: props.mapCenter.lat, lng: props.mapCenter.lng}}
  onCenterChanged={getCenter()}
/>

अपडेट करें: मैं एक Stateless Functional Component का उपयोग कर रहा हूं:

const MarkerClustererExampleGoogleMap = withGoogleMap(props => (

    <GoogleMap 
        defaultZoom={14} 
        center={{lat: props.mapCenter.lat, lng: props.mapCenter.lng}} 
        onCenterChanged={getCenter()} 
    >
)

लेकिन मुझे त्रुटि मिलती है:

getCenter अपरिभाषित है।

इस समस्या का समाधान कैसे करें, धन्यवाद।

2
cm-brain 20 अप्रैल 2017, 10:57

3 जवाब

आप मानचित्र API से getCenter(), getZoom(), getBounds() आदि जैसे कार्यों को एक प्रतिक्रिया ref के माध्यम से मानचित्र घटक पर कॉल कर सकते हैं

यहां एक मोटा उदाहरण दिया गया है, ध्यान दें कि यह एक अप्रयुक्त स्निपेट है और इसे स्यूडोकोड माना जाना चाहिए, लेकिन उम्मीद है कि यह आपको यह विचार देता है कि यह सेट अप कैसे करें:

let ref

...

<GoogleMap 
  ref={(mapRef) => ref = mapRef} // bind the ref
  onCenterChanged={() => {
    ref.getCenter() // get the center, zoom, whatever using the ref
  }}
/>

दस्तावेज़ीकरण में इसे कैसे करना है, इसके अधिक विस्तृत उदाहरण हैं, उदाहरण के लिए यहां ए>।

1
davnicwil 14 अक्टूबर 2019, 17:10

आपको इसे इस तरह उपयोग करने की ज़रूरत है:

onCenterChanged={this.getCenter}

नोट: onCenterChanged एक ईवेंट है, इसलिए सुनिश्चित करें कि आपने कंस्ट्रक्टर में बाइंडिंग को इस तरह परिभाषित किया है

this.getCenter = this.getCenter.bind(this);

या आप arrow function का भी, Arrow Function: द्वारा उपयोग कर सकते हैं

onCenterChanged={ (e)=> this.getCenter(e)}

अपडेट: आपने यह उल्लेख नहीं किया कि आप Stateless Functional Component का उपयोग कर रहे हैं, जब भी कोई प्रश्न पूछें, तो पूरी जानकारी प्रदान करने का प्रयास करें।

इसे जांचें, function को Stateless Functional Component के अंदर कैसे परिभाषित करें:

var App = () => {

   var click = function() {
      console.log('a');
   }
   
   return(
      <div onClick={click}> Click </div>
   )
}

ReactDOM.render(<App/>, document.getElementById('app'))
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id='app'/>
0
Mayank Shukla 20 अप्रैल 2017, 12:24
ओह, मैं आपके संकल्प की तरह उपयोग कर सकता था, लेकिन मेरे पास स्टेटलेस घटक है। और मेरा चर "यह" परिभाषित नहीं है। मैं बिना चर "यह" const MarkerClustererExampleGoogleMap = withGoogleMap(props => ( <GoogleMap defaultZoom={14} center={{lat: props.mapCenter.lat, lng: props.mapCenter.lng}} onCenterChanged={console.log("this", this)} > के घटक GoogleMap का उपयोग करता हूं
 – 
cm-brain
20 अप्रैल 2017, 12:06
@ सेमी-ब्रेन अद्यतन उत्तर की जांच करें, स्टेटलेस कार्यात्मक घटक के अंदर फ़ंक्शन को कैसे परिभाषित करें। इसे वैसे ही लिखें जैसे यह काम करेगा।
 – 
Mayank Shukla
20 अप्रैल 2017, 12:18

उदाहरण पर एक नज़र डालें: स्थान खोज बॉक्स जोड़ना. कोड का यह हिस्सा आपको सही रास्ता दिखाएगा)

handleMapMounted(map) {
  this._map = map;
}

handleBoundsChanged() {
  this.setState({
  bounds: this._map.getBounds(),
  center: this._map.getCenter(),
});
}
0
Taras Yaremkiv 6 मई 2017, 23:34