reactjs - 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

好吧，经过几天的折腾，我终于弄明白了。这个问题与我使用标记的自定义图标有关。复制示例的引脚使其正常工作。

Answer 2

又找到了一个解决方案：

let size = 40;

{cities.map(({ coordinates }) => (
  <Marker
    latitude={coordinates.latitude}
    longitude={coordinates.longitude}
  >
    <div
      style={{ transform: `translate(${-size / 2}px,${-size}px)` }}
      onClick={(e) => {
        setSelectedCity(coordinates);
      }}
    >
      <img
        src={process.env.PUBLIC_URL + '/assets/location.svg'}
        alt="Location-icon"
      />
    </div>
  </Marker>
))}

这里最重要的是：

style={{ transform: `translate(${-size / 2}px,${-size}px)\` }}

Answer 3

因为每次滚动时您的纬度和经度都会改变

const [viewport, setViewport] = useState({
  width: '100%',
  height: 240,
  latitude: 41.70123,
  longitude: 44.85137,
  zoom: 17,
  mapboxApiAccessToken: process.env.MAP_ACCESS_TOKEN
})

const [marker] = useState({
  latitude: 41.70123,
  longitude: 44.85137
})

<ReactMapGL className="map" {...viewport} onViewportChange={listenViewportChange}
>
  <Marker {...marker}>
    <img src={mapPingIcon} alt="" />
  </Marker>
</ReactMapGL>