可以通过以下步骤实现:
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
现在在浏览器中访问http://localhost:3000,你将看到一个带有标记的地图,标记的位置是通过x和y坐标来定义的。
推荐的腾讯云相关产品和产品介绍链接地址:
以上是使用React JS在地图中显示带有x,y坐标的标记的完整答案。希望能对您有所帮助!
没有搜到相关的沙龙
领取专属 10元无门槛券
手把手带您无忧上云