마커 위치가

Question

내가 반응 - 구글 -지도 MapWithAMarker 예를했다가 변경 될 때 MapWithAMarker 실패가 다시 쓰게 :

import React from 'react'; 
import { compose, withProps, lifecycle} from 'recompose'; 
import { 
    withScriptjs, 
    withGoogleMap, 
    GoogleMap, 
    Marker, 
} from 'react-google-maps'; 
import keys from '../../components/config/keys'; 

const MapWithAMarker = compose(
    withProps({ 
     googleMapURL: `https://maps.googleapis.com/maps/api/js?key=${keys.google_maps_api_key}&v=3.exp&libraries=geometry,drawing,places`, 
     loadingElement: <div style={{ height: '100%' }} />, 
     containerElement: <div style={{ height: '400px' }} />, 
     mapElement: <div style={{ height: '100%' }} />, 
    }), 
    withScriptjs, 
    withGoogleMap 
)(props => 
    <GoogleMap 
     defaultZoom={8} 
     defaultCenter={{ lat: props.lat, lng: props.lng }}> 
     <Marker position={{ lat: props.lat, lng: props.lng }}/> 
    </GoogleMap> 
); 

export default MapWithAMarker; 

을 내가 같이 사용 :

<MapWithAMarker lat={parseFloat(excursion.lat)} 
           lng={parseFloat(excursion.lng)} /> 

내가 사용하는 내 응용 프로그램에서 라우터를 반작용하십시오.

관찰 된 동작 : 처음으로 페이지를 렌더링 할 때지도가 올바르게 렌더링됩니다. 다른 마커 위치로 페이지를 다시 렌더링하는 링크를 클릭하면지도가로드되지 않고 스크롤 할 때 "press ctrl plus zoom with zoom"과 함께 빈 회색 사각형이 렌더링됩니다.

Answer 1

는 해결 : 내가 확대 센터와 defaultZoom에 defaultCenter을 변경하는 데 필요한 :

<GoogleMap zoom={8} 
      center={{ lat: props.lat, lng: props.lng }}> 
    <Marker position={{ lat: props.lat, lng: props.lng }}/> 
</GoogleMap>