React MapBox：缩放上移动的标记

Question

这个问题已经被问过很多次了，但似乎没有一个解决方案能够解决问题。

当我缩小时，所有标记都会移出位置。

这是我的 App.js：

import * as React from "react";
import Map, { Marker } from "react-map-gl";

function App() {
  return (
    <Map
      initialViewState={{
        longitude: -100,
        latitude: 40,
        zoom: 3.5,
      }}
      mapStyle="mapbox://styles/mapbox/streets-v9"
      mapboxAccessToken={process.env.REACT_APP_MAPBOX}
      style={{ width: "100vw", height: "100vh" }}
    >
      <Marker longitude={-100} latitude={40} anchor="bottom">
        <img src="./pin.png"/>
      </Marker>
    </Map>
  );
}

export default App;

这是 index.js：

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import 'mapbox-gl/dist/mapbox-gl.css';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

没有额外的样式

Answer 1

我遇到了同样的问题，这让我头疼了好几天......但我通过添加此导入“mapbox-gl/dist/mapbox-gl.css”修复了我的问题。尝试一下，看看是否有效。它应该有效。呵呵...

Answer 2

我遇到了同样的问题，我按照以下步骤修复：

1. 转到您的 index.js
2. 添加 import 'mapbox-gl/dist/mapbox-gl.css';

您可以检查以下链接：
https://docs.mapbox.com/help /tutorials/use-mapbox-gl-js-with-react/