使用React JS在地图中显示带有x，y坐标的标记

npx create-react-app map-markers

cd map-markers

npm install react-map-gl react-mapbox-gl

import React from 'react';
import ReactMapGL, { Marker } from 'react-map-gl';

const Map = () => {
  const [viewport, setViewport] = React.useState({
    width: '100%',
    height: '400px',
    latitude: 0,
    longitude: 0,
    zoom: 10
  });

  const markers = [
    { id: 1, latitude: 40.7128, longitude: -74.0060 },
    { id: 2, latitude: 34.0522, longitude: -118.2437 },
    // Add more markers as needed
  ];

  return (
    <ReactMapGL
      {...viewport}
      mapboxApiAccessToken={process.env.REACT_APP_MAPBOX_ACCESS_TOKEN}
      onViewportChange={setViewport}
    >
      {markers.map(marker => (
        <Marker
          key={marker.id}
          latitude={marker.latitude}
          longitude={marker.longitude}
        >
          <div className="marker" />
        </Marker>
      ))}
    </ReactMapGL>
  );
}

export default Map;

import React from 'react';
import Map from './Map';

const App = () => {
  return (
    <div className="App">
      <h1>Map with Markers</h1>
      <Map />
    </div>
  );
}

export default App;

.marker {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: red;
}

npm start