React-google-map是一个基于React的Google地图组件库,redux是一个用于管理应用状态的JavaScript库。在获取新位置时将地图居中可以通过以下步骤实现:
import React from 'react';
import { GoogleMap, withGoogleMap } from 'react-google-maps';
import { connect } from 'react-redux';
const Map = withGoogleMap(props => (
<GoogleMap
defaultCenter={props.center}
defaultZoom={props.zoom}
center={props.center}
zoom={props.zoom}
/>
));
const mapStateToProps = state => ({
center: state.map.center,
zoom: state.map.zoom
});
export default connect(mapStateToProps)(Map);
// mapReducer.js
const initialState = {
center: { lat: 0, lng: 0 },
zoom: 10
};
const mapReducer = (state = initialState, action) => {
switch (action.type) {
case 'SET_CENTER':
return {
...state,
center: action.payload
};
case 'SET_ZOOM':
return {
...state,
zoom: action.payload
};
default:
return state;
}
};
export default mapReducer;
// 在合适的地方触发获取新位置的操作
const newLocation = { lat: 40.7128, lng: -74.0060 };
dispatch({ type: 'SET_CENTER', payload: newLocation });
这样,当获取到新的位置时,地图会自动居中显示该位置。
推荐的腾讯云相关产品:腾讯云地图服务(https://cloud.tencent.com/product/maps)
领取专属 10元无门槛券
手把手带您无忧上云