在react-google-maps中,要通过代码移动地图,可以使用google-map-react
库提供的map
对象来实现。
首先,确保已经在项目中安装了google-map-react
库。
npm install google-map-react
然后,在你的React组件中引入google-map-react
库和Google Maps API:
import React from 'react';
import GoogleMapReact from 'google-map-react';
const AnyReactComponent = () => <div>你的自定义标记</div>;
class Map extends React.Component {
constructor(props) {
super(props);
this.mapRef = React.createRef();
}
handleMapLoaded = (map) => {
this.map = map;
// 在地图加载完毕后,可以通过this.map来操作地图
// 可以在这里调用移动地图的方法
this.moveMap();
};
moveMap = () => {
const { lat, lng } = this.props.center; // 获取地图中心点坐标
const newCenter = new window.google.maps.LatLng(lat, lng);
this.map.panTo(newCenter); // 移动地图到新的中心点
};
render() {
const { center, zoom } = this.props;
return (
<div style={{ height: '400px', width: '100%' }}>
<GoogleMapReact
bootstrapURLKeys={{ key: '你的Google Maps API Key' }}
defaultCenter={center}
defaultZoom={zoom}
yesIWantToUseGoogleMapApiInternals
onGoogleApiLoaded={({ map }) => this.handleMapLoaded(map)}
>
<AnyReactComponent lat={center.lat} lng={center.lng} />
</GoogleMapReact>
</div>
);
}
}
export default Map;
以上代码是一个基本的使用google-map-react
库的地图组件。在handleMapLoaded
方法中,我们获取到了地图的实例对象,并将其存储在this.map
中。然后,我们可以在moveMap
方法中调用panTo
方法来移动地图到新的中心点坐标。
在组件中使用这个地图组件:
import React from 'react';
import Map from './Map';
const App = () => {
const center = {
lat: 37.7749,
lng: -122.4194,
};
const zoom = 11;
return (
<div>
<h1>地图示例</h1>
<Map center={center} zoom={zoom} />
</div>
);
};
export default App;
在上述示例中,我们通过center
和zoom
属性来控制地图的中心点和缩放级别。可以根据实际需求进行调整。
需要注意的是,在使用google-map-react
库之前,需要去Google Cloud Platform上创建一个项目并获取到API Key,将其替换到代码中的bootstrapURLKeys
属性中。
这样,当地图加载完毕后,handleMapLoaded
方法会被调用,然后在handleMapLoaded
方法中可以调用moveMap
方法来移动地图到新的中心点坐标。
参考文档:
领取专属 10元无门槛券
手把手带您无忧上云