谷歌地图不在reactjs中重新渲染_Reactjs_Google Maps_Render

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

reactjs google-maps

谷歌地图不在reactjs中重新渲染,reactjs,google-maps,render,Reactjs,Google Maps,Render,我试图根据用户搜索显示数据库中存在的商店的不同位置，但首先我需要使用用户当前的纬度和经度将地图居中我在状态中将lat和lng设置为0，并在安装组件时更新状态值问题是，更新此状态值时，贴图组件不会重新渲染 import React, { Component } from 'react' import { Map, GoogleApiWrapper, InfoWindow, Marker } from 'google-maps-react'; import { GeneConsumer } fr

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

我在状态中将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);

import React，{Component}来自“React”
从“google maps react”导入{Map、GoogleApiWrapper、InfoWindow、Marker}；
从“../../store”导入{GeneConsumer}；
常量映射样式={
宽度：“100%！重要”，
身高：“100%！重要”
};
类LocationMap扩展了组件{
建造师（道具）{
超级（道具）；
此.state={
当前LATLNG：{
纬度：0，
液化天然气：0
},
showingInfoWindow:false，//隐藏或显示信息窗口
activeMarker:{}，//单击时显示活动标记
selectedPlace:{}//在标记上显示指向所选位置的信息窗口
}
}
componentDidMount（）{
navigator.geolocation.getCurrentPosition(
（职位）=>{
这是我的国家({
当前LATLNG：{
纬度：位置坐标纬度，
lng:position.coords.longitude
}
});
},
（错误）=>{
这是我的国家({
当前LATLNG：{
纬度：6.4494007，
液化天然气：3.4498444
}
});
}
)
}
render（）{
console.log（this.state.currentLatLng.lat）
console.log（this.state.currentLatLng.lng）
返回(
{value=>{
常量{locations}=值；
常量显示标记=（）=>{
如果（！位置）{
返回null；
}
返回位置。地图（（位置，索引）=>{
返回markerclick（位置）}
name={location.name}
/>
})
}
在MarkerClick上的常量=（道具、标记、e）=>
这是我的国家({
选择地点：道具，
活动标记器：标记器，
showingInfoWindow：真
});
const onClose=props=>{
if（此.state.showiningInfo窗口）{
这是我的国家({
ShowingInfo窗口：false，
活动标记：空
});
}
};
返回(
{displayMarkers（）}
{this.state.selectedPlace.name}
);
}}
);
}
}
导出默认GoogleApprapper({
apiKey:'XXXXXXXXXXXXXXXXXXXXXX'
})（位置图）；

这是出于设计，更新

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

类映射示例扩展组件{
状态={
currentCenter:this.props.center//默认中心
};
handleMapClick=（参考，地图，ev）=>{
this.setState（{currentCenter:ev.latLng}）；
};
render（）{
返回(
);
}
}
导出默认GoogleApprapper({
阿皮奇：“你的钥匙在这里”
})（例如）；