使用setState更改标记位置反应Google Map组件_React Google Map

时间:2019-05-01 08:05:39

标签: reactjs react-google-maps

我知道我可以制作一个外部组件,并将其与坐标参数一起传递给google。但是我的问题是我要更改状态,但标记不会移动,因为react map组件不知道我要更改标记的改变状态。

地图组件:

<GoogleMapReact
  styles={{ height: '100vh', width: '100%' }}
  bootstrapURLKeys={{ key: "nothing comes free these days" }}
  defaultCenter={this.state.center}
  defaultZoom={20}>
  <Marker position={{ lat: this.state.position.lat, lng: this.state.position.lng }} text='Current location' />
</GoogleMapReact>

<button onClick={(e) => this.setState({ position: { lat: map.location.coordinates[0], lng: map.location.coordinates[1] } })}>pin</button>

this.state = {
  center: {
      lat: 35.4090,
      lng: 51.1555
  },
  position: {
      lat: 35.4090,
      lng: 51.1555
  },
}

0 个答案:

没有答案