使用 google-map-react 更新折线

如何解决使用 google-map-react 更新折线

我对谷歌地图非常陌生，并尝试为折线实现切换功能，但我正在努力做到这一点。使用下面的代码，第一个切换有效，但在那之后 geodesicpolyline 变得未定义，即使我在 renderpolylines() 中重新实例化它。下面是我的代码的一部分。我正在使用谷歌地图反应。任何帮助将不胜感激。

const [googleMap,setGoogleMap] = React.useState();
const [googleMaps,setGoogleMaps] = React.useState();
const toggleChecked = () => {
      if(checked){
      geodesicpolyline?.setMap(null);
    }
      else {
        renderpolylines(); 
      }
      setChecked(!checked);
  }

  const renderpolylines = () => {
    geodesicpolyline = new googleMaps.polyline({
      path:  markers,geodesic: true,strokeColor: '#00a1e1',strokeOpacity: 2,strokeWeight: 2,googleMap
    });
    geodesicpolyline.setMap(googleMap);
    fitBounds();
  };

  const fitBounds = () => {
    const bounds = new googleMaps.LatLngBounds();
    for (const marker of markers) {
      bounds.extend(new googleMaps.LatLng(marker.lat,marker.lng));
    }
    googleMap.fitBounds(bounds);
  };

  return (
      <div className={classes.container}>
        <GoogleMapReact
          yesIWantToUseGoogleMapApiInternals
          onGoogleApiLoaded={({ map,maps}) => {setGoogleMaps(maps); setGoogleMap(map);}}
          options={createMapOptions}
          bootstrapURLKeys={{ key: window.ENV_DATA.REACT_APP_MAPS_KEY }}
          defaultCenter={defaultProps.center}
          defaultZoom={defaultProps.zoom}
        >
          <Toggle lat={6.15500000} lng={1.41083333} checked={checked} toggleChecked={toggleChecked} />
        </GoogleMapReact>
      </div>
        );