Question

我在一个项目中同时使用react-google-maps和react-geo-located包-我的问题是，每当我单击一个标记以打开它的infoBox时，地图都会捕捉回到用户位置，然后捕捉再回到标记。如果我只是将中心设置为引用我先前在文件中定义的defaultPosition const，则不会发生。标记/信息框不会导致此重新居中问题。

地理位置HOC需要花一秒钟才能真正找到用户的位置，然后将其作为道具传递给GoogleMaps组件，这就是为什么我为要在GoogleMap组件中的“中心”设置三元组的原因默认位置，然后如果找到用户坐标将中心更新为地理位置坐标（在我的示例中，地理位置HOC将坐标作为props.coords馈入地图）。

我觉得问题的一部分是地理位置HOC需要一两秒钟才能真正找到用户信息并将其传递给我的GoogleMap组件，而且我不确定如何在当前代码中有效地解决这一问题。 ..然后我又注意到，通常在任何时候，我都会传递一些东西作为道具来居中，这样的来回问题就会发生...

还有另一种/更好的方法来实现我的代码示例，以使其停止在用户位置和所选标记之间来回移动吗？

import React from 'react';
import { compose, withStateHandlers } from 'recompose';
import {
  withScriptjs,
  withGoogleMap,
  GoogleMap,
  Marker,
  InfoWindow
} from 'react-google-maps';
import mapStyles from '../../mapStyle';
import { fetchMovie } from '../reducers/omdbMovieReducer';
import { connect } from 'react-redux';
import { geolocated } from 'react-geolocated';

const defaultPosition = { lat: 40.742963, lng: -73.986683 };

const Map = compose(
  withStateHandlers(
    () => ({
      currentlySelected: null
    }),
    {
      onMarkerClicked: ({ currentlySelected }) => movieId => ({
        currentlySelected: movieId
      })
    },
    {
      removeSelected: ({ currentlySelected }) => () => ({
        currentlySelected: null
      })
    }
  ),
  withScriptjs,
  withGoogleMap
)(props => (
  <GoogleMap
    defaultZoom={15}
    center={
      props.coords
        ? { lat: props.coords.latitude, lng: props.coords.longitude }
        : defaultPosition
    }
    defaultOptions={{ styles: mapStyles }}
  >
    {props.coords && ( 
      <Marker
        key="userPosition"
        position={{ lat: props.coords.latitude, lng: props.coords.longitude }}
      />
    )}

...OMMITED CODE ...


export default geolocated({
  positionOptions: {
    enableHighAccuracy: false
  },
  userDecisionTimeout: 5000
})(
  connect(
    mapStateToProps,
    mapDispatchToProps
  )(Map)
);

理想情况下，我希望地图使用硬编码的默认中心进行渲染，然后如果/当用户位置数据可用于一次性将地图重新居中时，将其渲染到用户位置。

中心不断在用户位置和反应Google地图中的打开标记infoBox之间进行切换

0 个答案: