PolylineF 除了路径之外在点之间画直线

Question

我使用 @react-google-maps/api 中的 PolylineF 在地图上绘制多边形。我有一些点，我从 google.maps.DirectionsService() 计算路线函数中的路径。当地图加载后第一次绘制时，我接受点之间的两个多边形，一个可以通过 DirectionsService 协调，但第二个是磨损的，它是点之间的直线绘制。 仅在加载后第一次出现，其他时候绘图都很好

这是我的代码：

const PolygonOnMap = ({ markpoints, close, remove, getPoints, readOnly, ss }) => {
    const { isLoaded } = useContext(GoogleMapAPIContext)
    const [points, setPoints] = useState([])
    const [, setDirRender] = useState(null)
    const dirService = useMemo(()=>{
        console.log('useMemo',isLoaded);
        if(isLoaded)
            return new window.google.maps.DirectionsService();
        return null;
    },[isLoaded])


    const drawPolygon = async (markpoints) => {

        setPoints([])

        for (let i = 0; i < markpoints.length - 1; i++) {
            if (dirService) {
                try {
                    const result = await dirService.route({ origin: markpoints[i], destination:      markpoints[i + 1], travelMode: window.google.maps.TravelMode.WALKING })
                    let newPoints = result.routes[0].overview_path.map(p => ({ lat: p.lat(), lng: p.lng() }))

                    setPoints(prev => [...prev, ...newPoints])
                }
                catch (error) {
                    console.log(error.message)
                }
            }
            
        }
       
    }

    useEffect(() => {

        drawPolygon(markpoints)
    }, [markpoints])


    return <>
        <div>
            {markpoints.map((p, i) => <MarkerF key={i} position={p} index={i} />)}
            {<PolylineF
                path={points}
                geodesic={true}
                options={{
                    fillColor: "red",
                    strokeColor: "#ff2527",
                    strokeOpacity: 0.75,
                    strokeWeight: 2,

                }}
            />}

        </div>
    </>
}

export default PolygonOnMap

我也会在下面附上屏幕截图 具有多个多边形的地图:()

Answer 1

多个多边形仅在加载中，因为组件在开发模式下渲染两次，所以当删除index.js页面中的strictMode标签时 像这样：

// <StrictMode>
        <App />
// </StrictMode>

问题解决了