Question

我收到了多个错误，并且不知道从哪里去。

缺少必需的道具containerElement或mapElement。你需要提供它们。 google.maps.Map实例将在mapElement上初始化，并由containerElement包装。您需要同时提供它们，因为Google Map要求DOM在初始化时具有高度。

这些都是显示的错误。我查看了文档，我知道我可能设置错了，但我真的不知道该怎么做。

以下是代码：

GoogleMapPage：

import React, { Component } from 'react';

import { withGoogleMap, GoogleMap, Marker } from 'react-google-maps';
const googleMapURL =
  'https://maps.googleapis.com/maps/api/js?v=3.27&libraries=places,geometry&key=AIzaSyA7XEFRxE4Lm28tAh44M_568fCLOP_On3k';

const GettingStartedGoogleMap = withGoogleMap(props =>
  <GoogleMap
    ref={props.onMapLoad}
    defaultZoom={3}
    defaultCenter={{ lat: -25.363882, lng: 131.044922 }}
    googleMapURL={googleMapURL}
    onClick={props.onMapClick}
  >
    {props.markers.map(marker =>
      <Marker
        {...marker}
        onRightClick={() => props.onMarkerRightClick(marker)}
      />
    )}
  </GoogleMap>
);

class GettingStartedExample extends Component {
  render() {
    return (
      <GettingStartedGoogleMap
        containerElement={<div style={{ height: `100%` }} />}
        mapElement={<div style={{ height: `100%` }} />}
      />
    );
  }
}
export default withGoogleMap(GettingStartedExample);

App.js：

import React, { Component } from 'react';

import GettingStartedExample from './components/GoogleMapPage';

class App extends Component {
  render() {
    return (
      <div>
        <GettingStartedExample />
      </div>
    );
  }
}

export default App;

index.js：

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import registerServiceWorker from './registerServiceWorker';

ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();

Answer 1

你有 export default withGoogleMap(GettingStartedExample);

containerElement和mapElement必须是withGoogleMaps之外的道具才能为我抛出错误。它是否有效： export default GettingStartedExample;

设置问题后会对Google地图

1 个答案: