Используйте методы реагировать-google-maps с рекомпозировать - PullRequest
Новая
       23

Используйте методы реагировать-google-maps с рекомпозировать

0 голосов
/ 29 августа 2018

Я использую реагирующие карты Google для тонкой настройки местоположения пользователя после функции геолокации, это часть моего кода Map.js: 

    const MyMapComponent = compose(
  withProps({
    googleMapURL: "https://maps.googleapis.com/maps/api/js?key=AIzaSyAKCqAqiyop85LNl9qUb6OAT1lJupLEnzo&v=3.exp&libraries=geometry,drawing,places",
    loadingElement: <div style={{height: `100%`}}/>,
    containerElement: <div style={{height: `400px`}}/>,
    mapElement: <div style={{height: `100%`}}/>,
  }),
  withState(),
  withHandlers(() => {
    const refs = {
      map: undefined,
    }

    return {
      onMapMounted: () => ref => {
        refs.map = ref
      },
      onBoundsChanged: ({onBoundsChanged}) => () => {
        onBoundsChanged(refs.map.getCenter().lat(), refs.map.getCenter().lng())
      }
    }
  }),
  withScriptjs,
  withGoogleMap
)((props) =>
  <GoogleMap
    defaultZoom={8}
    defaultCenter={{lat: props.lat, lng: props.lng}}
    ref={props.onMapMounted}
    onBoundsChanged={props.onBoundsChanged}
  >
    <Marker position={{lat: props.lat, lng: props.lng}}/>
  </GoogleMap>
)

Я просто хочу иметь возможность вызывать метод panTo () в другом компоненте через ref, внутренне у меня нет проблем, потому что я думаю, что ref проходит нормально в методе mapMounting (refs.map.getCenter (). Lat () ), но как вызывать тебя методы извне, моя проблема в том, что я использую библиотеку перекомпоновки. спасибо заранее.

часть кода в Home.js, где я использую map и у меня есть метод get position, который я хочу вызвать panTo (): 

import MyMapComponent from './Maps';
export default class HomeComponent extends React.Component {

render() {
 const {showAlert, address, lat, lng} = this.props;
 return (
          <MyMapComponent
            lat={lat}
            lng={lng}
            onBoundsChanged={this.props.handleOnBoundsChanged}
          />
          <Button onClick={()=>this.props.getPosition()}>Usar mi 
                   ubicación actual</Button>
        )
    }
  }

1 Ответ

0 голосов
/ 30 августа 2018

Вы можете создать опору из любого метода карты. 

...

withHandlers(() => {
  let map;
  return {
    onMapMounted: () => ref => {
      map = ref;
    },

    onBoundsChanged: ({ onBoundsChanged }) => () => {
      onBoundsChanged(map.getCenter().lat(), map.getCenter().lng());
    }

    mapPanTo: () => args => map.panTo(args),
  };
})

...

Теперь props.mapPanTo можно передать любому другому компоненту.

...