谷歌地图 "Uncaught TypeError: Cannot read property 'defaultView' of undefined"

Question

当我试图在React:中加载谷歌地图时，我一直收到这个错误

"Uncaught TypeError: Cannot read property 'defaultView' of undefined"

我有一个加载谷歌地图的组件，但它失败了，我不知道哪里出了问题。我相信错误仅限于此组件，因为应用程序成功渲染，但由于上述错误，地图没有显示在其中。

class DoctorsMap extends React.Component {
constructor(props) {
super(props);
this.geocoder = new google.maps.Geocoder();
this.mapRef = React.createRef();
this.handleMarkerClick = this.handleMarkerClick.bind(this);
this.setTheCenter = this.setTheCenter.bind(this);
}
componentDidMount () {
this.map = new google.maps.Map(this.mapRef.current.outerHTML);
this.setTheCenter();
this.markerManager = new MarkerManager(this.map, this.handleMarkerClick);
this.markerManager.updateMarkers(this.props.doctors);
}
componentDidUpdate () {
return this.markerManager.updateMarkers(this.props.doctors);
}
setTheCenter() {
this.geocoder.geocode({address: `${this.props.address}`}, (results, status) => {
if (status === google.maps.GeocoderStatus.OK) {
const coordinates = results[0].geometry.location;
this.map.setCenter(coordinates);
this.map.setZoom(11);
} else {
alert("Geocode failed: " + status);
}
});
}
handleMarkerClick(doctor) {
return this.props.history.push(`/doctor/${doctor.id}`);
}
docSearchToggle() {
if (this.props.location.pathname.includes("/doctor/")) {
return ["map-doc-canvas", "map-doc-container"];
} else {
return ["map-search-canvas", "map-search-container"];
}
}
render () {
return(
<div id={this.docSearchToggle()[1]}>
<div id={this.docSearchToggle()[0]} ref={this.mapRef}></div>
</div>
);
}
}

有什么想法吗？

Answer 1

如果下面的代码有助于您的问题

如果您正在使用Sapui5，请使用此代码

sap.ui.getCore().byId("Your Id").getDomRef();

或

this.getView().byId("Your ID").getDomRef();

如果您使用的是HTML

document.getElementById("Your Id").getDomRef();

Answer 2

只有new google.maps.Map(this.mapRef.current)。需要HTMLElement，但您支持字符串(HTMLElement.outerHTML(