Question

尝试在React中加载Google地图时，我不断收到此错误消息：

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

我有一个加载Google地图的组件，但是它失败了，我不知道它出了什么问题。我认为该错误仅限于此组件，因为该应用程序已成功渲染，但由于上述错误，地图未在其中显示。

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();

OR

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

如果您使用的是HTML

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

Answer 2

> mvn clean > mvn install。需要new google.maps.Map(this.mapRef.current)，但您支持字符串（HTMLElement.outerHTML）

Google地图“未捕获的TypeError：无法读取未定义的属性'defaultView'”

2 个答案: