React MapBox：标记在缩放上移动答案

【问题标题】：React MapBox: Markers moving on ZoomReact MapBox：标记在缩放上移动
【发布时间】：2022-10-18 14:25:10
【问题描述】：

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

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

这是我的 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')
);

没有多余的造型

【问题讨论】：

标签： reactjs mapbox mapbox-gl-js mapbox-marker

【解决方案1】：

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

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。

【解决方案2】：

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

转到您的 index.js
添加导入'mapbox-gl/dist/mapbox-gl.css'；
您可以查看以下链接： https://docs.mapbox.com/help/tutorials/use-mapbox-gl-js-with-react/

【讨论】：