类型错误： 无法读取未定义的属性'maps'

Question

componentDidMount() {
window.initMap = this.initMap
((doc, script) => {
const element = doc.getElementsByTagName(script)[0];
const fjs =element;
let js = doc.createElement(script);
js.src = `https://maps.googleapis.com/maps/api/js?key=${this.props.mapKey}&callback=initMap`
if (fjs && fjs.parentNode) {
fjs.parentNode.insertBefore(js, fjs)
} else {
doc.head.appendChild(js)
}
})(document, 'script')
}
initMap = () =>{
let uluru = {lat: -25.344, lng: 131.036};
let map = new window.google.maps.Map(
document.getElementById('map'), {zoom: 4, center: uluru});

}

我正在动态创建一个脚本标记来加载谷歌函数，并将全局initMap函数分配给本地函数。当我运行这个函数时，我得到了无法读取undefiend的属性映射有人能帮我吗？我做错了什么？

Answer 1

问题是代码在脚本加载之前运行
已经有开源项目可以实现谷歌地图，但如果你仍然想自己实现它，那么你可以使用scriptjs。此包允许您导入资源并在加载时运行功能。在这种情况下不需要脚本标记。

运行示例：

class GoogleMap extends React.Component {
componentDidMount() {
if (!window.google || !window.google.maps) {
const { googleKey } = this.props;
// require is not working inside stackoverflow snippets
// we are using a cdn for scriptjs, you can use npm
//const $script = require(`scriptjs`);
$script(
`https://maps.googleapis.com/maps/api/js?key=${googleKey}`,
this.handleGoogleLoad
);
}
}
componentDidUpdate(prevProps) {
const { position } = this.props;
if (prevProps.position !== position) {
this.map && this.map.setCenter(position);
this.marker && this.marker.setPosition(position);
}
}
handleGoogleLoad = () => {
const { position } = this.props;
this.map = new window.google.maps.Map(this.mapRef, {
scaleControl: true,
center: null,
zoom: 10
});
this.marker = new window.google.maps.Marker({
map: this.map,
position: position
});
this.map.setCenter(position);
this.marker.setPosition(position);
};
render() {
return <div style={{ height: "350px" }} ref={ref => (this.mapRef = ref)} />;
}
}
class App extends React.Component {
state = { lat: 40.741895, lng: -73.989308, googleKey: "" };
onInputChange = ({ target }) => {
this.setState({ [target.name]: target.value });
};
render() {
const { lat, lng, googleKey } = this.state;
const position = { lat: Number(lat), lng: Number(lng) };
return (
<div className="App">
<div>
<label>Paste google key </label>
<input
name="googleKey"
value={googleKey}
onChange={this.onInputChange}
/>
<hr />
<div>Change coords</div>
<input name="lat" value={lat} onChange={this.onInputChange} />
<input name="lng" value={lng} onChange={this.onInputChange} />
</div>
<hr />
{googleKey ? (
<GoogleMap position={position} googleKey={googleKey} />
) : (
<div>Missing google key</div>
)}
</div>
);
}
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

<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>
<script src="https://cdnjs.cloudflare.com/ajax/libs/script.js/2.5.9/script.min.js"></script>
<div id="root"/>