直到地图轻微移动或在 react-map-gl 中单击时才会显示标记

Question

在我滚动或拖动地图之前，不会加载此标记。即使刷新后，标记也不显示。我已经硬编码了这个值。我只是在寻找要显示的标记，而无需拖动或单击。

import React from 'react';
import Icon from 'react-fa';

import ReactMapGL, { Marker } from 'react-map-gl';

export default class EdgeExplorer extends React.Component {
  state = {
    viewport: {
      width: window.innerWidth,
      height: window.innerHeight,
      latitude: 36.778259,
      longitude: -119.417931,
      zoom: 4,
      mapboxApiAccessToken: 'I will write my token here',
    }
  }
  staticMarker = () => {
    return (
      <Marker latitude={37.773972} longitude={-122.431297} offsetLeft={-2}
        offsetTop={-22}>
        <Icon name="map-pin" className="text-white" />
      </Marker>
    );
  }
  render() {
    const { viewport } = this.state;
    return (
      <ReactMapGL
        {...viewport}
        mapStyle='mapbox://styles/mapbox/dark-v9'
        onViewportChange={v => this.setState({ viewport: v })
        }>
        {this.staticMarker()}
      </ReactMapGL>
    );
  }
}

Answer 1

在此处使用 ComponentDidMount() 并更新视口值。它会正常工作的。