如何总是在右侧制作反应传单标记弹出窗口？

Question

我想在地图屏幕右侧显示一个反应传单标记弹出窗口，但它总是粘在屏幕的左侧。因此，我将感谢您完成此操作的任何帮助。以下是弹出窗口当前状态的屏幕截图。

这是我尝试过的我的CSS。

.leaflet-popup {
  transform: none !important;
  position: absolute !important;
  top: 1px !important;
  bottom: 0px !important;
  right: 0% !important;
  display: flex !important;
  align-items: right !important;
  justify-items: right !important;
}

.leaflet-container .leaflet-popup-content-wrapper .popup_modle {
  z-index: 1000;
  position: absolute;
  right: 0 !important;
  height: 400px;
  width: 300px;
  top: -1px;
  background-color: rgba(5, 5, 5, 0.7) !important;
  background: linear-gradient(
    60deg,
    rgba(134, 134, 134, 0.7) 0%,
    rgba(0, 0, 0, 0.7) 59%
  ) !important;
  align-items: right !important;
  justify-items: right !important;
  justify-content: right !important;
  -webkit-border-radius: 0 !important;
  -moz-border-radius: 0 !important;
}

谢谢

Answer 1

如果此CSS没有反映您的代码。我建议您将其移至全局CSS文件。为了确保您覆盖反应叶样式。我刚刚更新了 .leaflet-popup 类。而不是右：0％我使用右：0！

.leaflet-popup {
      transform: none !important;
      position: absolute !important;
      top: 1px !important;
      bottom: 0px !important;
      right: 0% !important;
      display: flex !important;
      align-items: right !important;
      justify-items: right !important;
    }
    
    .leaflet-container .leaflet-popup-content-wrapper .popup_modle {
      z-index: 1000;
      position: absolute;
      right: 0 !important;
      height: 400px;
      width: 300px;
      top: -1px;
      background-color: rgba(5, 5, 5, 0.7) !important;
      background: linear-gradient(
        60deg,
        rgba(134, 134, 134, 0.7) 0%,
        rgba(0, 0, 0, 0.7) 59%
      ) !important;
      align-items: right !important;
      justify-items: right !important;
      justify-content: right !important;
      -webkit-border-radius: 0 !important;
      -moz-border-radius: 0 !important;
    }

Answer 2

最重要的是，该标记我还添加了一个模型来显示数据。

并且该模型像这样将地图排名第一，因此您可以编写自己的弹出窗口。

const [open, setOpen] = React.useState(false);
const [data, setData] = React.useState();

 const handleClose = () => {
    setOpen(false);
  };

  const handleOpen = (datas) => {
    setOpen(true);
    setData(datas);
  };

<div className="map_data w-full">
      <Modal
        open={open}
        onClose={handleClose}
        className="modal_container"
        BackdropProps={{
          timeout: 0,
          invisible: true,
        }}
      >
        <div className="popup_modle pl-3 ">
          <button
            onClick={handleClose}
            className="text-md absolute  right-3   text-lightDarkGreen  font-bold top-3"
            id="myModal"
          >
            X <button />
          </button>
          <div className="relative top-10">
            <div className="pb-4 ">
              <p className="text-white text-sm opacity-80">Name</p>
              <p className="text-white font-bold text-4xl relative top-2">
                {date?.name}
              </p>
            </div>
            <div className="border-t border-deepDark relative pt-4 ">
              <p className="text-white text-2xl relative  opacity-80">
                Geographic index
              </p>
              <p className="text-white text-lg font-bold relative top-5 ">
                {date?.location?.country_name}, {"  "}
                {date?.location?.city}
              </p>
            </div>
          </div>
          <br />
        </div>
      </Modal>
      <Map
        ref={mapRefs}
        center={center}
        zoom={2}
        onPopupopen={centerMapView}
        maxZoom={19}
        position={center}
        bounceAtZoomLimits={true}
        maxBoundsViscosity={0.95}
        scrollWheelZoom={false}
        zoomAnimation={true}
        maxBounds={[
          [-180, -90],
          [180, 90],
        ]}
        zoomSnap={0.5}
        style={{ width: "100%", height: "400px" }} //zIndex: -10
      >
        <TileLayer
          url={`https://tiles.stadiamaps.com/tiles/alidade_smooth_dark/{z}/{x}/{y}{r}.png?api_key=${process.env.REACT_APP_STADIA_API_KEY}`}
          attribution='© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
        />
        {data.length > 0 && (
          <FeatureGroup ref={groupRef}>
            {data?.map((location, i) => (
              <>
 

                <Circle
                  center={[
                    parseFloat(location?.location?.lat_lon?.lat),

                    parseFloat(location?.location?.lat_lon?.lon),
                  ]}
                  fillOpacity={0.6}
                  color={"#32E8C3"}
                  fillColor={"#32E8C3"}
                  radius={355 * 2000}
                  eventHandlers={{ click: () => handleOpen(location) }}
                ></Circle>
              </>
            ))}
          </FeatureGroup>
        )}
      </Map>

和CSS

.popup_modle {
  position: absolute;
  right: 0 !important;
  top: 65px !important;
  height: 400px;
  width: 300px;
  background-color: rgba(5, 5, 5, 0.7) !important;
  background: linear-gradient(
    60deg,
    rgba(134, 134, 134, 0.7) 0%,
    rgba(0, 0, 0, 0.7) 59%
  ) !important;
}