Javascript 反应传单-对齐地图中心的弹出窗口

如果单击标记，我希望将地图视图平移到标记的中心。到目前为止，这对我的项目有效。此外，我希望打开的弹出窗口在地图视图的中心对齐

我想我可以用弹出的

传单

类硬编码如下：

.leaflet-popup {
  transform: translate(-40%, 50%) !important;
}

但这是行不通的。我的代码的问题是，弹出窗口的位置独立于地图视图。但根据当前的观点，它应该居中。我可以向您展示我的地图设置：

编辑 我提供了一个链接供大家玩。单击顶部的标记，您将看到弹出窗口未与屏幕中心对齐：

映射组件

const{Map，tillelayer，Marker，GeoJSON}=reacts传单；
函数MapOverlay（{SetSweepState}）{
const mapRef=useRef（null）；
常量[donationLocations]=useState([
[48.135125, 11.581981], [58.403, 20.420], [43.300, 40],
[70.505, -20], [40.505, -80], [-40.505, -10]
]);
功能中心地图视图（e）{
常量{element}=mapRef.current；
如果（e）{
传单元素.setView（e.popup._latlng）；//弹出窗口打开位置的中心视图
//todo:在屏幕中间对齐弹出窗口
//获取地图视图的边界，将其除以2，并将坐标应用于弹出位置
}
}
函数getMapData（）{
返回(
{
捐赠地点。地图（（位置，i）=>
(
)
)
}
)
}
返回(
{getMapData（）}
)
}

标记弹出组件

const{Popup}=react传单；
导出默认函数MarkerPopup（）{
返回(
...
);
}

功能中心地图视图（e）{
常量{element}=mapRef.current；
如果（e）{
const popuplatng=e.popup.\u latlng；
const zoom=ployelement.getZoom（）；
const point=ployelement.project（popuplatling，zoom）；
常量newPoint=点减法（[0180]）；
const newLatlng=floapelement.unproject（newPoint，zoom）；
panTo（newLatlng，{animate:true}）；
}
}

---

您可以将

centerMapView

功能更新为以下内容。这将首先将

Latlng

值转换为

点

值，然后通过减去特定数量的像素（偏移量）来修改该值，最后将

点

值转换回

Latlng

并使用该值调用

panTo

最好的解决方案是创建一个始终位于屏幕中央的模式弹出窗口

---

在（'popupopen'）的事件上显示它。

我设法使它工作起来。解决方案是创建一个与DOM分离的模式对话框

您可以看到工作代码：

//从父级向打开状态传递setOpen函数
函数MarkerPopup（{open，setOpen}）{
const classes=useStyles（）；
函数handleClose（）{
setOpen（假）；
}
返回(
蜥蜴
蜥蜴是一种广泛分布的有鳞爬行动物，有超过6000种，包括
跨越除南极洲以外的所有大陆
细节
捐赠
);
}

你好。到目前为止你有什么？如果是这样的话，你把标记放在y轴的中心，比如说，而不是在地图的中心，弹出窗口看起来很好，也居中。你到底想实现什么？@kboul我用一个CodeSandBox链接更新了我的问题。我想要实现的是在地图中心完美对齐的弹出窗口。所有这些代码都将更新地图视图容器。但是如果标记在加拿大的北部和弹出窗口打开，那么弹出窗口就不会放在屏幕中间。请参阅我问题中的CodeSandBox链接。好的，那么在这个坐标上添加一个标记：[-84，-99]抱歉，这不起作用。然后只做一个模式弹出窗口

const {Map, TileLayer, Marker, GeoJSON} = ReactLeaflet;

function MapOverlay({setSwipeState}) {
    const mapRef = useRef(null);
    const [donationLocations] = useState([
        [48.135125, 11.581981], [58.403, 20.420], [43.300, 40],
        [70.505, -20], [40.505, -80], [-40.505, -10]
    ]);


    function centerMapView(e) {
        const {leafletElement} = mapRef.current;

        if(e) {
            leafletElement.setView(e.popup._latlng); // center view to where popup opens
            // todo: align popup in the middle of the screen
            // Get bounds of map view, divide it by 2 and apply coorditanes to the popup position


        }

    }

    function getMapData() {
        return (
            <div>
                {
                    donationLocations.map((position, i) =>
                        (
                            <Marker position={position} key={i}>
                                <MarkerPopup/>
                            </Marker>
                        )
                    )
                }
            </div>
        )
    }

    return (
        <Map
            ref={mapRef}
            center={[45.000, 10.000]}
            zoom={3}
            onPopupopen={centerMapView.bind(this)}
            zoomControl={false}
            minZoom={3}
            bounceAtZoomLimits={true}
            maxBoundsViscosity={.95}
            maxBounds={[[-180, -90], [180, 90]]}
        >
            <TileLayer
                noWrap={true}
                attribution='&amp;copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors | &amp;copy <a href="https://apps.mapbox.com/feedback/">Mapbox</a>'
                url={'https://api.mapbox.com/styles/v1/mapbox/streets-v11/tiles/{z}/{x}/{y}?access_token=' + process.env.REACT_APP_MAPBOX_KEY}
            />
            {getMapData()}
        </Map>
    )
}

const {Popup} = ReactLeaflet;

export default function MarkerPopup() {

    return (
        <Popup
            autoPan={false} // Important part here
        >
            <Card>
                   ...
            </Card>
        </Popup>
    );
}

// Pass open state an setOpen function from the parent
function MarkerPopup({open, setOpen}) {
  const classes = useStyles();

  function handleClose() {
      setOpen(false);
  }

  return (
      <Popup
          autoPan={false}
      >
          <Modal
              className={classes.modal}
              open={open}
              classes={{root: classes.root}}
              onClose={handleClose.bind(this)}
              BackdropComponent={Backdrop}
              BackdropProps={{
                  timeout: 0,
                  invisible: true
              }}
          >
              <Card className={classes.card}>
                  <CardMedia
                      className={classes.media}
                      image="https://material-ui.com/static/images/cards/contemplative-reptile.jpg"
                      title="Contemplative Reptile"
                  />
                  <CardContent>
                      <Typography gutterBottom variant="h5" component="h2">
                          Lizard
                      </Typography>
                      <Typography variant="body2" color="textSecondary" component="p">
                          Lizards are a widespread group of squamate reptiles, with over 6,000 species, ranging
                          across all continents except Antarctica
                      </Typography>
                  </CardContent>
                  <CardActions>
                      <Button size="small" color="primary">
                          Details
                      </Button>
                      <Button size="small" color="primary">
                          Donate
                      </Button>
                  </CardActions>
              </Card>
          </Modal>
      </Popup>
  );
}