如何在react-google-maps中通过代码移动地图？

在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方法来移动地图到新的中心点坐标。

参考文档：