如何使用 TypeScript 和 React 将地图弹出窗口放置在某个元素旁边的固定位置？

Question

我是使用 Google Maps API 的新手，我希望将弹出窗口始终放置在地图上元素旁边的固定位置，以便它可以随地图拖动，并使用 TypeScript 和 React 将其放置在地图上。

我想做什么？

当单击页面底部的按钮之一时，我会显示一个弹出窗口。这些按钮称为区域，它们可能具有与之相关的多边形。

当用户单击这些按钮之一时，地图上会显示一个弹出窗口。这个弹出窗口的位置是这样的，

如果区域按钮有一个多边形，那么它会读取该多边形的坐标并将弹出窗口定位在多边形坐标处。如果没有多边形并且设置了地址，则它将弹出位置设置在地址坐标处。如果没有多边形也没有地址，那么它将弹出位置设置为谷歌地图的中心。

但现在我想将弹出窗口始终放置在工具元素旁边的位置，这样弹出窗口距离工具元素左侧 16px，并且弹出窗口可以随地图拖动。

下面是我的代码，

function useArea() {
    const googleMap = useGoogleMaps();
    const popUpRef = React.useRef<any>();
    const [position, setPosition] = React.useState<google.maps.LatLng>();
    const [mapPopups, setMapPopups] = React.useState<MapPopup[]>([]);

    const navigateToPolygon = (area: area, address?: address) => { 
        const polygon = head(area.polygons);
        const coords = polygon && head(polygon.coordinate);
        let latLng = googleMap.googleMap.getCenter();
        if (polygon && coords) {
            latLng = new google.maps.LatLng(coords.latitude, coords.longitude);
        } else if (address) {
            latLng = new google.maps.LatLng(
                address.coordinate.latitude,
                address.coordinate.longitude
            );
        }
        setPosition(latLng); //this is where the popup position is set
        googleMap.googleMap.panTo(latLng);
        googleMap.googleMap.panBy(0, 100);
    };

    const showPopup = React.useCallback(() => { //this is where the popup is created
        if (popUpRef.current && pos) {
            const popup = new MapPopup(position, popUpRef.current);
            popup.setMap(googleMap.googleMap);
            setMapPopups([popup]);
        }
    }, [position, popUpRef, googleMap]);

    return {
        popUpRef,
        showPopUp,
        navigateToPolygon,
    }
}

function GoogleMapView() {
    const area = useArea();
    return (
        <Tools/> //this is the element to which the popup should be positioned in                relation to
        <Popup
            popUpRef={area.popUpRef}
            showPopUp={area.showPopUp}
        /> 
        <Areas area={area}/>
    );
}

function Tools () { //this is a component containing some icons
    return (
        <Wrapper>
            //some icons included
        </Wrapper>
    );
}

function Areas() {

    const selectPolygon = React.useCallback() => {
        area && area.navigateToPolygon(area, address);
    },[area]
    return (
        {
            areas.map(area => {
                return(
                    <Area onSelect={selectPolygon}/>
                );
            }
         }
     );
 }

 function Area ({onSelect}: Props) { //individual button Area component
     return (
         <Wrapper onClick={onSelect}/> // this calls the selectPolygon which in turn                  // calls navigateToPolygon function
     );
 }         


 function PopUp ({showPopUp, popUpRef}: Props) {
     useEffect(() => {
         showPopup();
     }, [showPopup]);
     return (
         <Wrapper ref={popUpRef}>
             //some other divs included here
         </Wrapper>
     );
 };

从上面的代码可以看出，MapView中渲染了Tools、PopUp、Areas组件。单击其中一个区域会显示一个弹出窗口。如果该区域存在弹出窗口，则弹出窗口将根据多边形坐标进行定位。如果没有多边形并且有地址，则弹出窗口根据地址坐标定位。如果没有多边形和地址，则弹出窗口位于谷歌地图的中心。

现在我想修改此代码，使弹出窗口始终显示在谷歌地图上的固定位置（无论多边形，地址是否存在），使其距谷歌地图上的工具组件左侧16px。 ..

我必须修改 navigatorToPolygon 方法中的 setPosition 。但我不知道该怎么做。有人可以帮我解决这个问题吗？谢谢。

我是使用或编写与谷歌地图相关的代码的新手。有人可以帮我解决这个问题吗？谢谢。

编辑：强文本

下图是当前使用上述代码显示多边形的弹出窗口的图片，

我想要怎样？

我想做什么？

我正在考虑将包装器 div 放入工具组件高度并将其设置为弹出窗口的顶部值。但此弹出位置是使用 setPos(latlng) 设置的，如上面的 navigatorToPolygon 组件中的代码所示。在这种情况下应该设置什么值？？？？

编辑：如果不是完整的解决方案，至少有人可以提供一些如何完成的起点。谢谢