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

Question

尝试在 React 中加载谷歌地图时，我不断收到此错误:

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

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

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("你的 ID").getDomRef();

或

this.getView().byId("你的ID").getDomRef();

如果您使用的是 HTML

document.getElementById("你的 ID").getDomRef();