直到地图略微移动或在 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() 并在此处更新视口值。它会很好地工作。

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

markers not displaying until map moved slightly or clicked in react-map-gl

reactjs

react-map-gl