reactjs MapBox固定点不渲染

6l7fqoea  于 2023-01-25  发布在  React
关注(0)|答案(1)|浏览(104)

我正在按照指南一步一步地构建一个带有标记的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
  }
]
7nbnzgx9

7nbnzgx91#

添加以下内容解决了我的问题:
import "mapbox-gl/dist/mapbox-gl.css";

相关问题