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

Я использую карты 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 проходит нормально в методе mapMounted ( refs.map.getCenter().lat() ), но как вызывать эти методы извне, моя проблема в том, что я использую библиотеку recompose. Спасибо заранее.

часть кода в Home.js, где я использую карту и имею метод получения позиции, который я хочу вызвать 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>
        )
    }
  }

reactjs react-google-maps recompose
person BetoCuevas    schedule 29.08.2018    source источник
comment
вы все равно можете передать вычисляемую опору в GoogleMap, а затем использовать ее с panTo в любом из обработчиков событий   -  person Sakhi Mansoor    schedule 29.08.2018
comment
Я новичок в реагировании, я изо всех сил пытаюсь сделать обработчик событий и вызвать его, если вы можете помочь. Я с примером кода. Большое спасибо.   -  person BetoCuevas    schedule 30.08.2018
comment
Послушайте, не могли бы вы сказать мне, когда вы хотите вызвать panTo ()? каков вариант использования   -  person Sakhi Mansoor    schedule 30.08.2018
comment
Я использую функцию getGeolocation, затем рисую маркер на карте, поэтому после этого я не буду перемещать карту в эту новую позицию, полученную функцией getGeolocation, поэтому в основном мне нужен способ вызвать эту функцию с новыми параметрами lat lng, надеюсь, я объяснился, и заранее спасибо за ваше время @sak   -  person BetoCuevas    schedule 30.08.2018
comment
где ваш обработчик getCurrentLocation?   -  person Sakhi Mansoor    schedule 30.08.2018
comment
В другом компоненте у меня есть Map.js с кодом, который я разместил, затем я импортирую его в компонент Home.js и передаю некоторые реквизиты lat lng по умолчанию, поэтому, когда я нажимаю кнопку в компоненте Home.js, я могу передать новый lat lng props, а затем вызовите метод panTo() компонента Map.js с этим новым местоположением. я мог бы сделать это в vanilla js, но здесь я использую recompose и, очевидно, реагирую   -  person BetoCuevas    schedule 30.08.2018
comment
Давайте продолжим это обсуждение в чате.   -  person BetoCuevas    schedule 30.08.2018

Ответы (1)


arrow_upward
0
arrow_downward

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

...

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

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

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

...

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

person GollyJer    schedule 29.08.2018