Google maps api 3 在谷歌地图中动态添加、更新和删除标记

通过查看有关的文档，我能够拼凑一些代码来渲染带有静态数据的地图。现在，我需要根据来自API的新数据或定期更新对地图进行更改，但没有看到任何关于如何进行更改的讨论

为了制作最初的应用程序，我做了一个“npx创建react app xxx”来创建一个应用程序，然后为react google maps添加了必要的npm包。以下是基本代码：

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import * as serviceWorker from './serviceWorker';
import { withScriptjs, withGoogleMap, GoogleMap, Marker } from "react-google-maps"


let markers = []

function createMarkers(numMarkers){

    for(let i = 0; i < numMarkers; i++){
        markers.push(<Marker key={i} position={{ lat: 45.123 + (i * 0.005), lng: -75.987 }} />)
    }

    return markers;
}

setInterval(function(){ 
  if(markers.length > 0 && markers[0].props.position){
    let marker = markers[0];
    //debugger;
    let position = marker.props.position;
    position.lat = position.lat - 0.005;
    position.lng = position.lng - 0.005;
    marker.props.position = position;
  }
}, 1000)

const MyGreatMap = withScriptjs( withGoogleMap(props => <GoogleMap
      defaultZoom={14}
      defaultCenter={{ lat: 45.123, lng: -75.978 }}
    >
      {createMarkers(10)}
    </GoogleMap>));


ReactDOM.render(
  <MyGreatMap 
    googleMapURL="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry,drawing,places&key=AIzaSyDS-TFZqRfUx9xPXTJrPH6eml-gGo-btZ0"
    loadingElement={<div style={{ height: `100%` }} />}
    containerElement={<div style={{ height: `800px` }} />}
    mapElement={<div style={{ height: `100%` }} />}
  />, 
  document.getElementById('root'));

从“React”导入React；
从“react dom”导入react dom；
导入“./index.css”；
将*作为serviceWorker从“/serviceWorker”导入；
从“反应谷歌地图”导入{withScriptjs，withGoogleMap，GoogleMap，Marker}
让标记=[]
函数createMarkers（numMarkers）{
for（设i=0；i0&&markers[0].props.position）{
设marker=markers[0]；
//调试器；
let position=marker.props.position；
position.lat=position.lat-0.005；
位置.lng=位置.lng-0.005；
marker.props.position=位置；
}
}, 1000)
const MyGreatMap=withScriptjs（withGoogleMap（props=>
{createMarkers（10）}
));
ReactDOM.render(
, 
document.getElementById（'root'）；

当我更新道具时，什么也没发生。我确信这是错误的，它应该以某种方式更新状态，但标记中的lat/lng信息是道具

在谷歌地图中更新内容的最佳方式是什么？GoogleMaps通常是一个javascript密集型API，所以我不知道它是否能以“反应方式”工作。对谷歌地图进行更改的最佳方式是什么，以使其能够有效地使用更改重新渲染

我确信这是错误的，它应该以某种方式更新状态，但是 标记中的lat/lng信息是道具

没错，

标记

需要移动到，因此可以引入一个组件，该组件接受

标记

道具作为初始状态，然后按照如下方式更新状态：

class MapWithMarkers extends React.Component {
  constructor(props) {
    super(props);
    this.state= {markers: this.props.markers};   //1.initialize initial state from props
  }

  updateMarker() {
      this.setState(prevState => {
        const markers = [...prevState.markers];
        markers[index] = {lat: <val>, lng: <val>};
        return {markers};
     })
  }

  componentDidMount() {
    this.intervalId = setInterval(this.updateMarker.bind(this), 1000);
  }
  componentWillUnmount(){
    clearInterval(this.intervalId);
  }
  
  render() {
    return (
      <Map center={this.props.center} zoom={this.props.zoom} places={this.state.markers} />
    ); 
  }
}

类MapWithMarkers扩展了React.Component{
建造师（道具）{
超级（道具）；
this.state={markers:this.props.markers}；//1.props初始化初始状态
}
updateMarker（）{
this.setState（prevState=>{
常量标记=[…prevState.markers]；
标记[索引]={lat:，lng:}；
返回{markers}；
})
}
componentDidMount（）{
this.intervalId=setInterval（this.updateMarker.bind（this），1000）；
}
组件将卸载（）{
clearInterval（此为有效期）；
}
render（）{
返回(
); 
}
}

---

太棒了。正是我需要的。非常感谢。