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道具以及 initialCenter道具。以下示例演示了如何在地图点击事件上重新定位地图：

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);

谷歌地图未在reactjs中重新渲染

1 个答案: