css - 动态/响应式 CSS 大小

Question

我有一张带有位置标记的地图，我想在用户放大/缩小时更改标记的大小。我正在捕获状态的缩放级别，它是一个浮点数（即 11.3235）。

如何将此数字（来自状态）传递给 css 类，以便标记的大小会动态改变其大小？我希望标记的宽度和高度根据缩放级别精确，而不是使用小/中/大标记。

class Mapbox extends Component {
  constructor(props){
    super(props)
    this.state = {
      viewport: {
        width: 900,
        height: 500,
        latitude: 49.2463,
        longitude: -123.1162,
        zoom: 11
      },
      active_vehicles: [],
      marker_size: 0,
    };
  }

  _onViewportChange = viewport => {
    this.setState({viewport});

  // Depending on zoom level, change Markers' class to dynamically change their display size/style
    this.setState({marker_size: this.state.viewport.zoom})

  };

  createMarkers = () => {
    let markers = []

    if(this.state.active_vehicles){
      for (let i = 0; i < this.state.active_vehicles.length; i++) {
        markers.push(
        <Marker key={i} latitude={this.state.active_vehicles[i]["Latitude"]} longitude={this.state.active_vehicles[i]["Longitude"]}>
          <div className={"location-marker " + this.state.marker_size}></div>
        </Marker>
        )
      }
      return markers
    }
  }

  render() {
    return (
      <ReactMapGL
        // mapbox API access token
        mapboxApiAccessToken={MAPBOX_TOKEN}
        mapStyle="mapbox://styles/mapbox/dark-v9"
        {...this.state.viewport}
        onViewportChange={this._onViewportChange}>

        <div>
          {this.createMarkers()}
        </div>

      </ReactMapGL>
    );
  }   
}

标签： cssreactjs