Question

我只是想在页面上放置谷歌地图以启动反应项目，并且遇到了麻烦。具有id =＆＃34; map＆＃34;的div显示，但不是里面的地图。

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

这是我的组件google_map.js：

导入React，{Component}来自＆＃39;反应＆＃39 ;;

onChange

导入React，{Component}来自＆＃39;反应＆＃39 ;; 从＆＃39; ./ google_map＆＃39;;

导入GoogleMap

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

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;

的style.css：

class Feature extends Component {

  render() {

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


export default Feature;

Answer 1

我认为你必须添加

shouldComponentUpdate {
  return false
}

到您的GoogleMap组件。

说明：可能，React.js将其虚拟DOM与real同步（将由google maps修改）。进一步阅读：https://reactjs.org/docs/react-component.html#shouldcomponentupdate

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

1 个答案: