Question

我的React类中有以下代码，该代码可以按预期设置地图的中心位置。我的问题是，当我的componentDidMount完成时，我想使用从API返回的值重置地图的中心位置。

这就是我要实现的目标-

在页面加载时加载默认的地图中心位置（正在运行）
当我的API返回时，然后使用从API返回的值重新定位地图（这似乎不起作用）
使用从API返回的相同值在地图上创建图钉（此方法有效）

该代码包含在下面。我已经尝试了很多尝试，但是如上所述，我无法使其正常运行。有什么我想念的吗？我似乎无法重新定位地图。

谢谢

反应班

class Example extends Component {
  constructor(props) {
      super(props);
      this.state = {
          center: {
              lat: 100, 
              lng: 100
          }
      };

在我的componentDidMount函数内部

var self = this;

Promise.all([callMyApi()]).then(([result]) => { 

    // Set map center location
    self.setState(prevState => {
        let mapCenter = Object.assign({}, prevState.center);
        mapCenter.lat = result.latitude;                 
        mapCenter.lng = result.longitude;                 
        return { mapCenter };
    });


    // Set pin location
    var pinArray = [];
    pinArray.push({
        "id": "1",
        "latitude": result.latitude,
        "longitude": result.longitude
    });
    self.setState({pins: pinArray});

反应图的使用

const Pin = ({ profile }) => <div className={"pin"}><img src=".." /></div>;


<GoogleMapReact
bootstrapURLKeys={{ key: "" }}
defaultCenter={this.state.center} > 
{this.state.pins.map(p => (
    <Pin
        key={p._id}
        lat={p.latitude}
        lng={p.longitude}
        profile={p}
    />
))}

尝试＃1

self.setState({
      center: {
          lat: result.latitude, 
          lng: result.longitude
      }
});

Answer 1

实际上，由于center状态未在此处更新，因此地图未重新居中：

self.setState(prevState => {
    let mapCenter = Object.assign({}, prevState.center);
    mapCenter.lat = result.latitude;                 
    mapCenter.lng = result.longitude;                 
    return { mapCenter };
    ^^^^^^^^^^^^^^^^^^^^ 
});

正确的语法为：

self.setState(prevState => {
    let mapCenter = Object.assign({}, prevState.center);
    mapCenter.lat = result.latitude;
    mapCenter.lng = result.longitude;
    return {center : mapCenter};
});

或更直接的方法：

this.setState({
    center: {lat: result.latitude, lng: result.longitude}
});

有关更多详细信息，请参见State Updates May Be Asynchronous。

如何使用google-map-react库设置地图的中心位置

1 个答案: