谷歌地图没有在 reactjs 中重新渲染

Question

我试图根据用户搜索显示数据库中存在的商店的不同位置，但首先我需要使用用户当前的纬度和经度来居中地图。

我确实将状态中的 lat 和 lng 设置为 0，并在安装组件时更新了状态值。

问题是，当这个状态值更新时，地图组件不会重新渲染。

import React, { Component } from 'react'
import { Map, GoogleApiWrapper, InfoWindow, Marker } from 'google-maps-react';
import { GeneConsumer } from '../../store';

const mapStyles = {
  width: '100% !important',
  height: '100% !important'
};

class LocationMap extends Component {

  constructor(props) {
    super(props);

    this.state = {
      currentLatLng: {
        lat: 0,
        lng: 0
      },
      showingInfoWindow: false,  //Hides or the shows the infoWindow
      activeMarker: {},          //Shows the active marker upon click
      selectedPlace: {}          //Shows the infoWindow to the selected place upon a marker
    }

  }


  componentDidMount() {
    navigator.geolocation.getCurrentPosition(
      (position)  => {
        this.setState({
          currentLatLng: {
              lat: position.coords.latitude,
              lng: position.coords.longitude
          }
        });
      },
      (error) => {
        this.setState({
          currentLatLng: {
              lat: 6.4494007,
              lng: 3.4498444
          }
        });
      }
    )
  }

  render() {
    console.log(this.state.currentLatLng.lat)
    console.log(this.state.currentLatLng.lng)
    return(
      <GeneConsumer>
        {value => {
              const {locations} = value;

              const displayMarkers = () => {
                  if(!locations){
                      return null;
                  }
                  return locations.map((location, index) => {
                    return <Marker key={index} id={index} position={{
                    lat: location.latitude,
                    lng: location.longitude
                  }}
                    onClick={() => onMarkerClick(location)} 
                    name = {location.name}
                  />
                  })
              }

              const onMarkerClick = (props, marker, e) =>
                this.setState({
                  selectedPlace: props,
                  activeMarker: marker,
                  showingInfoWindow: true
              });

              const onClose = props => {
                if (this.state.showingInfoWindow) {
                  this.setState({
                    showingInfoWindow: false,
                    activeMarker: null
                  });
                }
              };

              return (

                  <Map
                    google={this.props.google}
                    zoom={10}
                    style={mapStyles}
                    initialCenter={{ lat: this.state.currentLatLng.lat, lng: this.state.currentLatLng.lng}}
                  >
                    {displayMarkers()}
                    <InfoWindow
                      marker={this.state.activeMarker}
                      visible={this.state.showingInfoWindow}
                      onClose={onClose()}
                    >
                    <div>
                      <h4>{this.state.selectedPlace.name}</h4>
                    </div>
                    </InfoWindow>
                  </Map>
              );
        }}
      </GeneConsumer>
    );

  }
}

export default GoogleApiWrapper({
  apiKey: 'xxxxxxxxxxxxxxxxxxxxxxxxxx'
})(LocationMap);

Answer 1

这是设计使然，更新 initialCenter 属性不会导致地图重新渲染：

initalCenter: 取一个包含经纬度的对象 坐标。加载时设置地图中心。

要重新居中地图，请使用center prop 以及 initialCenter prop。以下示例演示了如何在地图点击事件上重新居中地图：

class MapExample extends Component {
  state = {
    currentCenter: this.props.center   //default center  
  };

  handleMapClick = (ref, map, ev) => {
    this.setState({ currentCenter: ev.latLng });
  };

  render() {
    return (
      <Map
        google={this.props.google}
        className={"map"}
        initialCenter={this.props.center}
        center={this.state.currentCenter}
        zoom={this.props.zoom}
        onClick={this.handleMapClick}
      >
        <Marker position={this.state.currentCenter} />
      </Map>
    );
  }
}

export default GoogleApiWrapper({
  apiKey: "--YOUR-KEY-GOES-HERE--"
})(MapExample);