无法让google Map 显示在反应页面上-Java 学习之路

我只是想在页面上放置谷歌 Map 以启动反应项目，我遇到了麻烦 . id =“map”的div显示，但不显示其中的 Map .

我正在关注JS的谷歌 Map API文档，但显然我一定做错了 . 我想避免使用react-google-maps，因为我习惯在另一个框架中使用直接谷歌 Map api .

这是我的组件google_map.js：

从'react'导入React，;

class GoogleMap extends Component {
    componentDidMount() {
    new google.maps.Map(this.refs.map, {
      zoom: 12,
      center: {
        lat: 37.7952,
        lng: -122.4029
      }
    });
  }

  render() {
    return <div ref="map" />;
  }
}

export default GoogleMap;

从'react'导入React，;从'./google_map'导入GoogleMap;

这是我试图放置 Map 的地方：

class Feature extends Component {

  render() {

    return (
      <div id="map">
        <GoogleMap />
      </div>
    );
  }
}


export default Feature;

style.css中：

#map {
  height: 300px;
}

html, body {
  height: 100%;
   margin: 0;
   padding: 0;
}

1 回答

0
我认为你必须添加
```
shouldComponentUpdate {
  return false
}
```
到你的 GoogleMap 组件 .

说明：可能，React.js将其虚拟DOM与real同步（将由google maps修改） . 进一步阅读：https://reactjs.org/docs/react-component.html#shouldcomponentupdate
回复于 2024-05-06T23:22:02+08:00

无法让google Map 显示在反应页面上

1 回答

相关问题