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中单击

1 个答案: