动态/响应式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>
    );
  }   
}