Leaflet地图Popup固定于左侧的异常问题排查

我想把Leaflet地图的Popup固定在地图左侧，设置position: fixed后缩放正常，但拖动地图时Popup没法贴合左边缘。

相关代码 #

Map组件代码 #

<MapContainer zoom={this.state.zoom} center={center} zoomControl={false}>
    <TileLayer
        attribution='&copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
    />

    {this.state.geoJsonIsVisibleAll[0].geoJsonIsVisible &&
        <ChuyGeoJsonLayer url="kyrgyzstanPlaces.json" cluster={false}/>
    }
    {this.state.geoJsonIsVisibleAll[1].geoJsonIsVisible &&
        <TalasGeoJsonLayer url="kyrgyzstanPlaces.json" cluster={false}/>
    }
    {this.state.geoJsonIsVisibleAll[2].geoJsonIsVisible &&
        <OshGeoJsonLayer url="kyrgyzstanPlaces.json" cluster={false}/>
    }
    {this.state.geoJsonIsVisibleAll[3].geoJsonIsVisible &&
        <BatkenGeoJsonLayer url="kyrgyzstanPlaces.json" cluster={false}/>
    }
    {this.state.geoJsonIsVisibleAll[4].geoJsonIsVisible &&
        <JalalAbadGeoJsonLayer url="kyrgyzstanPlaces.json" cluster={false}/>
    }
    {this.state.geoJsonIsVisibleAll[5].geoJsonIsVisible &&
        <NarynGeoJsonLayer url="kyrgyzstanPlaces.json" cluster={false}/>
    }
    {this.state.geoJsonIsVisibleAll[6].geoJsonIsVisible &&
        <IssykKolGeoJsonLayer url="kyrgyzstanPlaces.json" cluster={false}/>
    }
</MapContainer>

Popup代码 #

<Marker
    key={f.properties.id}
    position={f.geometry.coordinate.reverse()}
>
<Popup
    maxWidth={250}
    maxHeight={650}
    closeButton={true}
    className={'popup-fixed'}
    autoPan={false}>
    <div className="popup-info">
    <p><span>Название: </span>{f.properties.name}</p>
    <p><span>Местоположение: </span>{f.properties.location}</p>
    <p><span>Описание: </span>{f.properties.description}</p>
    </div>
    </Popup>
</Marker>

样式代码 #

.leaflet-container {
  height: 70vh;
  width: 60vw;
  position: absolute;
  right: 20%;
  top: 15%;
}

.popup-fixed {
  position: fixed;
  top: 0;
  left: 1% !important;
  transform: none !important;
  margin: 0;
  border-radius: 0;
}

问题示意图 #

问题根源是Leaflet内部的拖拽事件会强制更新Popup的位置，即使设置了position: fixed也会被覆盖。以下两种方法可以解决：

方法1：强制脱离Leaflet的位置控制 #

修改样式，彻底阻断Leaflet对Popup的定位影响：

.popup-fixed {
  position: fixed !important;
  top: 0;
  left: 1% !important;
  transform: none !important;
  margin: 0;
  border-radius: 0;
  z-index: 9999 !important;
  /* 阻止Leaflet修改Popup位置 */
  pointer-events: none;
}
/* 恢复弹窗内部内容的交互能力 */
.popup-fixed .popup-info {
  pointer-events: auto;
}

同时在Popup组件中禁用所有自动定位选项：

<Popup
    maxWidth={250}
    maxHeight={650}
    closeButton={true}
    className={'popup-fixed'}
    autoPan={false}
    autoPanPadding={[0,0]}
    autoPanPaddingTopLeft={[0,0]}
    autoPanPaddingBottomRight={[0,0]}
    keepInView={false}
>

方法2：自定义固定弹窗（推荐） #

完全脱离Leaflet原生Popup机制，在地图外部单独渲染固定弹窗，通过Marker点击事件控制内容：

1. 添加弹窗状态：

state = {
  // 原有状态
  activePopupData: null
}

2. 修改Marker的点击逻辑：

<Marker
    key={f.properties.id}
    position={f.geometry.coordinate.reverse()}
    onClick={() => this.setState({ activePopupData: f.properties })}
>
</Marker>

3. 在地图组件外部渲染固定弹窗：

{this.state.activePopupData && (
  <div className="fixed-popup">
    <button onClick={() => this.setState({ activePopupData: null })}>关闭</button>
    <div className="popup-info">
      <p><span>Название: </span>{this.state.activePopupData.name}</p>
      <p><span>Местоположение: </span>{this.state.activePopupData.location}</p>
      <p><span>Описание: </span>{this.state.activePopupData.description}</p>
    </div>
  </div>
)}

4. 弹窗样式：

.fixed-popup {
  position: fixed;
  top: 0;
  left: 1%;
  width: 250px;
  max-height: 650px;
  background: white;
  border: 1px solid #ccc;
  z-index: 9999;
}

这种方式不受地图拖拽、缩放的影响，稳定性更高。

内容的提问来源于stack exchange，提问作者Курманкулов Белек