আমি আমার প্রকল্পে একটি প্রতিক্রিয়া মানচিত্র উপাদান যুক্ত করার চেষ্টা করছি তবে একটি ত্রুটি হিসাবে চালাচ্ছি। আমি ফুলস্ট্যাক রিএ্যাক্টের ব্লগ পোস্টটি একটি রেফারেন্স হিসাবে ব্যবহার করছি । আমি ত্রুটিটি যেখানে google_map.js লাইনে 83 নম্বরে ফেলেছি তা ট্র্যাক করেছি:
function _classCallCheck(instance, Constructor) {
if (!(instance instanceof Constructor)) {
throw new TypeError("Cannot call a class as a function");
}
}এখানে এখন পর্যন্ত আমার মানচিত্রের উপাদান রয়েছে। আমি শেষ তিনটি লাইন 58-60 লাইনের মন্তব্য দিলে পৃষ্ঠাটি ঠিক জরিমানা (কোনও মানচিত্র ছাড়াই) লোড হয়। সম্পাদনা: @ দিমিত্রি নেভজারভ প্রস্তাবিত পরিবর্তনগুলি করেছি এবং এটি এখনও আমাকে একই ত্রুটি দেয়।
import React from 'react'
import GoogleApiComponent from 'google-map-react'
export class LocationsContainer extends React.Component {
constructor() {
super()
}
render() {
const style = {
width: '100vw',
height: '100vh'
}
return (
<div style={style}>
<Map google={this.props.google} />
</div>
)
}
}
export class Map extends React.Component {
componentDidUpdate(prevProps, prevState){
if (prevProps.google !== this.props.google){
this.loadMap();
}
}
componentDidMount(){
this.loadMap();
}
loadMap(){
if (this.props && this.props.google){
const {google} = this.props;
const maps = google.maps;
const mapRef = this.refs.map;
const node = ReactDOM.findDOMNode(mapRef);
let zoom = 14;
let lat = 37.774929
let lng = 122.419416
const center = new maps.LatLng(lat, lng);
const mapConfig = Object.assign({}, {
center: center,
zoom: zoom
})
this.map = new maps.Map(node, mapConfig)
}
}
render() {
return (
<div ref='map'>
Loading map...
</div>
)
}
}
export default GoogleApiComponent({
apiKey: MY_API_KEY
})(LocationsContainer)এবং এখানে এই মানচিত্রের উপাদানটি মেইন.জেসগুলিতে রূপান্তরিত হয়:
import {render} from 'react-dom';
import React from 'react';
import Artists from './components/Artists'
import { Router, Route, Link, browserHistory } from 'react-router'
import Home from './components/HomePage'
import Gallery from './components/ArtGallery'
import ArtistPage from './components/ArtistPage'
import FavsPage from './components/FavsPage'
import LocationsContainer from './components/Locations'
//Create the route configuration
render((
<Router history={browserHistory}>
<Route path="/" component={Home} />
<Route path="locations" component={LocationsContainer} />
<Route path="artists" component={Artists} />
<Route path="gallery" component={Gallery} />
<Route path="favorites" component={FavsPage} />
<Route path=":artistName" component={ArtistPage} />
</Router>
), document.getElementById('app'))
আমি একটি ডিফল্ট অপসারণ করেছি এবং আপনার পরামর্শটি চেষ্টা করেছি। দেখে মনে হচ্ছে এটি আসলে গুগল ম্যাপের সাথে এখন কথা বলছে, যা ভাল, তবে পৃষ্ঠাটি লোড করার আগে এটি আরও একটি ক্রিপ্টিক ত্রুটি ছুঁড়ে দেয়: লোকেশনস.জেএস: 58 আনকচড টাইপ এরিয়ার: (মধ্যবর্তী মান) কোনও ফাংশন নয় "। কোনও ধারণা?
—
মাইক ফ্লেমিং
আপনি যদি অপসারণ
—
gcampbell
(LocationContainer)?
ধন্যবাদ, আমি মনে করি এটি পেয়েছে! অদ্ভুত, এটি তাদের ব্লগ পোস্টে এটি লেখা আছে। গুগল ম্যাপ থেকে এখনও কিছু অন্যান্য ত্রুটি পেয়েছি, আমি এগুলি এখানে রাখব: 'গুগলম্যাপ: এপিকে কে অবচয় করা হয়েছে, তার পরিবর্তে বুটস্ট্র্যাপ ইউআরএলকিগুলি = {{কী ব্যবহার করুন: YOUR_API_KEY}।। google_map.js: 689 গুগলম্যাপ: সেন্টার বা ডিফল্ট সেন্টারপ্রোপার্টি অবশ্যই google_map.js: 699 গুগলম্যাপ: জুম বা ডিফল্টজুম্পার্টি সংজ্ঞায়িত করতে হবে google_map.js: 704 '
—
মাইক ফ্লেমিং
আমি অন্যান্য ত্রুটি সম্পর্কে নিশ্চিত নই, তবে আপনি প্রথমটি ঠিক করার জন্য এটি চেষ্টা করতে পারেন:
—
gcampbell
export default new GoogleApiComponent({ bootstrapURLKeys: MY_API_KEY })
export default, এবং এটিnew GoogleAPIComponent()নাGoogleAPIComponent()?