React-map-gl 自定义标记在缩放时不会停留在精确位置

Question

我正在努力使用 Uber 的 React-map-gl 库加载 Mapbox 地图。我已通过 API 提供的 JSON 成功加载了带有自定义标记的地图（如您从第一张图片中看到的）。

不过，如果你看一下休斯顿附近的绿色标记，就会发现由于某种原因它位于墨西哥湾的某个地方。但是，如果我放大该区域......

您可以看到，当我放大时，标记会重新调整到正确的位置。什么会导致这样的事情呢？

import ReactMapGL, { Marker, NavigationControl, Popup } from 'react-map-gl';
import CityInfo from './city-info';
import 'mapbox-gl/dist/mapbox-gl.css';

class ExplorePage extends Component {
    state = {
        viewport: {
            width    : 400,
            height   : 400,
            latitude : 38.789093,
            longitude: -95.295881,
            zoom     : 3.7,
        },
        popupInfo: null,
    };

    componentDidMount() {
        this.props.dispatch(explorepageActions.getFavoriteHikes());
    }

    _renderMarker = (marker, index) => {
        return (
            <Marker
                anchor='bottom'
                key={`marker-${index}`}
                longitude={parseFloat(marker.longitude)}
                latitude={parseFloat(marker.latitude)}
            >
                <Pin width={100} onClick={(event) => this._handleClick(event, marker)} />
        </Marker>
        );
    };

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

    render() {
    const { explorepageData, loading } = this.props;
    const { viewport } = this.state;

    return (
        <ExplorePageStyles>
            {loading && <img src='/static/loading.svg' alt='loading' className='loading-img' />}
            {explorepageData.data &&
            <Fragment>
                <Sidebar>
                    <ExploreSidebar favoriteHikes={explorepageData} />
                </Sidebar>
                <ReactMapGL
                    {...viewport}
                    mapboxApiAccessToken={MAPBOX_TOKEN}
                    width='100%'
                    height='100%'
                    style={{ float: 'right' }}
                    onViewportChange={this._onViewportChange}
                    attributionControl={false}
                >
                    {explorepageData.data.map(this._renderMarker)}
                    {this._renderPopup()}
                    <div className="nav" style={navStyle}>
                        <NavigationControl />
                    </div>
                </ReactMapGL>
            </Fragment>
            }
        </ExplorePageStyles>
    );
}

}

Answer 1

包括 css 文件为我解决了这个问题

import 'mapbox-gl/dist/mapbox-gl.css'