Question

我正在使用React谷歌地图在地理位置功能后微调用户位置，这是我Map.js代码的一部分：

[HttpPost]
[Authorize]
[ValidateAntiForgeryToken]
public ActionResult Delete(long ProductId)
{
    /* Do I need to check if the logged in User has permission to delete the product?
    var product = ProductRepository.Get(Id);
    if (product.Creator == User.Identity.GetUserId<long>())
    {
        ProductRepository.Delete(ProductId);
    }
    */

    // or, can I avoid the trip to DB and just delete the record?        
    ProductRepository.Delete(ProductId); 
}

我只想能够通过ref在其他组件中调用panTo（）方法，在内部我没有问题，因为我认为ref在mapMounted方法中可以正常通过（refs.map.getCenter（）。lat（）），但是如何在外部调用您的方法，我的问题是我正在使用recompose库。提前谢谢。

我使用map并具有要触发panTo（）的get position方法的Home.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>
)

Answer 1

您可以从任何地图方法中创建道具。

...

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

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

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

...

现在props.mapPanTo可以传递给任何其他组件。

将react-google-maps方法与recompose一起使用

1 个答案: