使用 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>
        );

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）