如何根據狀態變化重新渲染Google地圖？

Question

我正在按照此指南將JavaScript Maps API與React.js集成：

http://cuneyt.aliustaoglu.biz/en/using-google-maps-in-react-without-custom-libraries/

我可以使地圖加載良好，並且一切正常。 我遇到的問題是狀態更改時無法重新渲染地圖。

本質上，我正在使用以下代碼： https : //stackblitz.com/edit/react-67pggp?file=index.js

除此之外，我正在嘗試通過狀態更改來動態更改標記的位置。 因此，在傳遞給Map組件的onMapLoad（）函數中，我替換了該行

position: { lat: 41.0082, lng: 28.9784 }

與類似的東西

position: { lat: this.state.lat, lng: this.state.lng }

並且我希望只要狀態中存儲的位置發生變化，標記的位置就會發生變化。 我知道問題源於僅在組件首次安裝時才調用onMapLoad（）的事實，但是我不確定如何使地圖重新渲染並顯示更新的標記位置。 任何幫助表示贊賞。 謝謝。

Answer 1

您可以使用getInitialState方法初始化默認狀態，並在render中使用此變量。

import React, { Component } from 'react';
import { render } from 'react-dom';
import Map from './map'

class App extends Component {
  constructor() {
    super();
  }
   getInitialState() {
    return {
       lat = '41.0082',
       lng = '28.9784'
     };
  }

  render() {
    return (
      <Map
        id="myMap"
        options={{
          center: { lat : this.state.lat ,lng : this.state.lng },
          zoom: 8
        }}
        onMapLoad={map => {
          var marker = new window.google.maps.Marker({
            position: { lat :this.state.lat, lng: this.state.lng },
            map: map,
            title: 'Hello Istanbul!'
          });
        }}
      />
    );
  }
}

render(<App />, document.getElementById('root'));