React Leaflet：调整点击/动态按钮的地图大小

编程问答 2022-05-30

问题描述

let style;
if(this.state.getMoreInfo){
  style = {
    height: "78vh",width: "75%",};
} else {
  style = {
    height: "78vh",width: "100%",};
}


<div className="mapContent">
  <Map 
    className="Map" 
    style={style} 
    center={{ lat: 40.7,lng: -74 }} 
    zoom={15} 
    onClick={this.addMarker}>
    <TileLayer
      attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
      url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
    />
    {this.state.data.map((house,idx) => 
      <Marker 
        key={`marker-${idx}`} 
        position={{ lat: house.latitude,lng: house.longitude }} 
        icon={ Icon } >
        <Popup>
          <Card className="housePopup">
            <CardHeader tag="h5">{house.address}</CardHeader>
            <CardBody className="houseDescription">
              <CardText>{house.description}</CardText>
            </CardBody>
            <Button 
              value={house} 
              onClick={() => this.setState({
                getMoreInfo: true,currHouse: house 
              })}>
              Get More Info
            </Button>
          </Card>
        </Popup>
      </Marker>
    )}
  </Map>                
  { this.state.getMoreInfo 
    ? (<HouseInfo house={this.state.currHouse}/>) 
    : (<div></div>)}
</div>

以上是我的 React 类组件的片段。我目前正在使用 React Leaflet 库为我的项目生成地图。我的目标是在点击更多信息按钮时生成一个特定的侧边栏。本质上，我想制作一个特定于数组中元素的动态按钮。但是，每次我单击按钮时，页面都会变为空白。我尝试在没有附加信息的情况下将地图设置为较小的宽度，并且它起作用了。我猜这可能是我创建按钮的逻辑有问题。有什么想法吗？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

javascriptreact-leafletreactjsreactjsreactjsreactjs