1

当搜索（使用邮政编码）发生时，我的 Google 地图渲染出现问题。似乎地图正在渲染空地图中心，然后在 componentDidMount() 中的 setState 之后不重新渲染，因为地图呈现为空白/灰色，但通过硬刷新，地图将与邮政编码一起加载。我试过使用 componentWillMount() 没有任何运气，有人有什么建议吗？

这是我的搜索页面的代码：

class SearchContainer extends Component {
  constructor(props) {
    super(props);
    this.state = {
      map_centre: null
    };
  }

  componentDidMount() {
    const values = queryString.parse(this.props.location.search);
    axios
      .get("api/v1/search?postcode=" + values.postcode)
      .then(response => {
        var mapCentre = response.data.map_centre;
        this.setState({
          map_centre: mapCentre
        });
      })
      .catch(error => console.log(error));
  }

  render() {
    return (
      <div id="map" className="padding-left">
        <GoogleMapComponent
          townCenters={this.state.townCenters}
          schools={this.state.schools}
          supermarkets={this.state.supermarkets}
          hotels={this.state.hotels}
          airports={this.state.airports}
          trainStations={this.state.trainStations}
          map_centre={this.state.map_centre}
          onMapMounted={this.handleMapMounted}
          onDragEnd={this.handleMapChange}
          onZoomChanged={this.handleMapChange}
          onMarkerClick={this.handleAdspaceShow}
          googleMapURL={url}
          loadingElement={<div style={{ height: `100vh`, width: `100%` }} />}
          containerElement={<div style={{ height: `100vh`, width: `100%` }} />}
          mapElement={<div style={{ height: `100vh`, width: `100%` }} />}
        />
        <img
          src={mapSearch}
          id="map-search-button"
          onClick={this.toggleSearchInput}
        />
        <input
          id="map-search-input"
          className="form-control d-none"
          type="search"
          placeholder="Enter new location"
          aria-label="Search"
          onChange={this.handlePostcodeChange}
          onKeyPress={this.handleNewSearch}
        />
      </div>
    );
  }
}

这是我的谷歌地图组件的代码：

const GoogleMapComponent = withScriptjs(
  withGoogleMap(props => (
    <GoogleMap
      defaultZoom={13}
      defaultCenter={props.map_centre}
      onDragEnd={props.onDragEnd}
      onZoomChanged={props.onZoomChanged}
      ref={props.onMapMounted}
    />
  ))
);
4

2 回答 2

0

更具体地使用您正在使用的库...您添加了标签“google-maps-react”和“react-google-map”，它们都是不同的库...

google-maps-react = https://github.com/fullstackreact/google-maps-react

react-google-map = https://tomchentw.github.io/react-google-maps/

无论如何，我可以看到 2 个选项：

解决方案1：

添加一个仅在 map_centre 不为空时才呈现 GoogleMapComponent 的条件。

  render() {
    if(this.state.map_centre){
      return (
        <div id="map" className="padding-left">
          <GoogleMapComponent
            townCenters={this.state.townCenters}
            schools={this.state.schools}
            supermarkets={this.state.supermarkets}
            hotels={this.state.hotels}
            airports={this.state.airports}
            trainStations={this.state.trainStations}
            map_centre={this.state.map_centre}
            onMapMounted={this.handleMapMounted}
            onDragEnd={this.handleMapChange}
            onZoomChanged={this.handleMapChange}
            onMarkerClick={this.handleAdspaceShow}
            googleMapURL={url}
            loadingElement={<div style={{ height: `100vh`, width: `100%` }} />}
            containerElement={<div style={{ height: `100vh`, width: `100%` }} />}
            mapElement={<div style={{ height: `100vh`, width: `100%` }} />}
           />
          <img
          src={mapSearch}
          id="map-search-button"
          onClick={this.toggleSearchInput}
          />
          <input
          id="map-search-input"
          className="form-control d-none"
          type="search"
          placeholder="Enter new location"
          aria-label="Search"
          onChange={this.handlePostcodeChange}
          onKeyPress={this.handleNewSearch}
          />
      </div>);
     }
     return <div> Loading.. </div>;
  }

解决方案2：

在获得响应之前设置默认的 lat/lng（非空）。

constructor(props) {
    super(props);
    this.state = {
      map_centre: { lat: -34.397, lng: 150.644 }
    };
  }
于 2018-09-30T23:04:05.253 回答
0

defaultCenter只会被地图用于初始渲染，因此如果您稍后更改此值，它将不会有任何影响。

如果您改用center道具，它将按预期工作。

const GoogleMapComponent = withScriptjs(
  withGoogleMap(props => (
    <GoogleMap
      defaultZoom={13}
      center={props.map_centre}
      onDragEnd={props.onDragEnd}
      onZoomChanged={props.onZoomChanged}
      ref={props.onMapMounted}
    />
  ))
);
于 2018-07-31T16:06:42.983 回答