我正在按照指南一步一步地构建一个带有标记的MapBoxMap组件,我使用React来完成这个任务,与指南不同的是,我使用的是typescript。
我也在使用react-map-gl
。我已经到了渲染标记的地步,与指南不同的是,我的标记根本不渲染。我已经查看了react-map-gl
文档,似乎我做的一切都是正确的。我也没有收到任何错误,无论是在我的IDE还是在控制台,但没有标记。
其他一切都运行良好。Map打开,它确实以所有大头针所在的位置为中心(根据数据)。
这是我的组件:
import React, { useState } from "react";
import ReactMapGL, { Marker } from "react-map-gl";
import getCenter from "geolib/es/getCenter";
function Map({ searchResults }: { searchResults: Array<any> }) {
const [selectedLocation, setSelectedLocation] = useState();
const coords = searchResults.map((result) => ({
latitude: result.lat,
longitude: result.long,
}));
const center = getCenter(coords);
const [viewport, setViewport] = useState({
latitude: center ? center.latitude : 0,
longitude: center ? center.longitude : 0,
zoom: 8,
});
console.log(selectedLocation);
return (
<ReactMapGL
mapStyle="mapbox://styles/levanter/cld8rfy27001w01oc8m0sl8pk"
mapboxAccessToken={process.env.mapbox_key}
style={{
width: "100%",
height: "100%",
}}
initialViewState={{ ...viewport }}
onMove={(evt) => setViewport(evt.viewState)}
>
{searchResults.map((result) => {
return (
<div key={result.long}>
<Marker
longitude={result.long}
latitude={result.lat}
// anchor="bottom"
// offset={[-20, -10]}
>
<p
className="cursor-pointer text-2xl animate-bounce"
onClick={() => setSelectedLocation(result)}
>
📌
</p>
</Marker>
</div>
);
})}
</ReactMapGL>
);
}
export default Map;
这是我正在使用的虚拟数据:
[
{
"img": "https://links.papareact.com/xqj",
"location": "Private room in center of London",
"title": "Stay at this spacious Edwardian House",
"description": "1 guest · 1 bedroom · 1 bed · 1.5 shared bthrooms · Wifi · Kitchen · Free parking · Washing Machine",
"star": 4.73,
"price": "£30 / night",
"total": "£117 total",
"long": -0.0022275,
"lat": 51.5421655
},
{
"img": "https://links.papareact.com/hz2",
"location": "Private room in center of London",
"title": "Independant luxury studio apartment",
"description": "2 guest · 3 bedroom · 1 bed · 1.5 shared bthrooms · Wifi · Kitchen",
"star": 4.3,
"price": "£40 / night",
"total": "£157 total",
"long": -0.095091,
"lat": 51.48695
},
{
"img": "https://links.papareact.com/uz7",
"location": "Private room in center of London",
"title": "London Studio Apartments",
"description": "4 guest · 4 bedroom · 4 bed · 2 bathrooms · Free parking · Washing Machine",
"star": 3.8,
"price": "£35 / night",
"total": "£207 total",
"long": -0.135638,
"lat": 51.521916
},
{
"img": "https://links.papareact.com/6as",
"location": "Private room in center of London",
"title": "30 mins to Oxford Street, Excel London",
"description": "1 guest · 1 bedroom · 1 bed · 1.5 shared bthrooms · Wifi · Kitchen · Free parking · Washing Machine",
"star": 4.1,
"price": "£55 / night",
"total": "£320 total",
"long": -0.069961,
"lat": 51.472618
},
{
"img": "https://links.papareact.com/xhc",
"location": "Private room in center of London",
"title": "Spacious Peaceful Modern Bedroom",
"description": "3 guest · 1 bedroom · 1 bed · 1.5 shared bthrooms · Wifi · Free parking · Dry Cleaning",
"star": 5.0,
"price": "£60 / night",
"total": "£450 total",
"long": -0.08472,
"lat": 51.510794
},
{
"img": "https://links.papareact.com/pro",
"location": "Private room in center of London",
"title": "The Blue Room In London",
"description": "2 guest · 1 bedroom · 1 bed · 1.5 shared bthrooms · Wifi · Washing Machine",
"star": 4.23,
"price": "£65 / night",
"total": "£480 total",
"long": -0.094116,
"lat": 51.51401
},
{
"img": "https://links.papareact.com/8w2",
"location": "Private room in center of London",
"title": "5 Star Luxury Apartment",
"description": "3 guest · 1 bedroom · 1 bed · 1.5 shared bthrooms · Wifi · Kitchen · Free parking · Washing Machine",
"star": 3.85,
"price": "£90 / night",
"total": "£650 total",
"long": -0.109889,
"lat": 51.521245
}
]
1条答案
按热度按时间7nbnzgx91#
添加以下内容解决了我的问题:
import "mapbox-gl/dist/mapbox-gl.css";