为什么react mapbox的地图上没有显示标记图标？

Question

我想在地图中包含我的精确地址，我正在使用 react-map-gl，因为它是免费使用的。我已经上传了地图选项的项目in codesandbox

我的目标是在我的地址周围的重要机构上放置图标，我从 material-ui 渲染了图标。我在地图框中使用的地图已经过定制。当鼠标指针悬停在位置图标上时，每个图标都应该弹出 adderss。

我正在复制下面的 App.js 的整个代码：

import React, { useState } from "react";
import ReactMapGL, { NavigationControl, Marker, Popup } from "react-map-gl";
import PinDropIcon from "@material-ui/icons/PinDrop";
const Token =
  "***";

const markerList = [
  {
    lat: 37.103271,
    long: -8.67322,
    name: "This is where i live in",
    info: 10
  },
  {
    lat: 37.1028,
    long: -8.67296,
    name: "Millennium bcp",
    info: 20
  },
  {
    lat: 37.10335,
    long: -8.67227,
    name: "Mercado Municipal de Lagos",
    info: 30
  }
];
const navStyle = {
  position: "absolute",
  top: 0,
  left: 0,
  padding: "10px"
};

function renderPopup({ index, popupInfo, setPopupInfo }) {
  return (
    <React.Fragment>
      {popupInfo && (
        <Popup
          tipSize={5}
          anchor="bottom-right"
          longitude={markerList[index].long}
          latitude={markerList[index].lat}
          onMouseLeave={(e) => {
            e.preventDefault();
            setPopupInfo(null);
          }}
          closeOnClick={true}
        ></Popup>
      )}
    </React.Fragment>
  );
}

export default function App() {
  const [popupInfo, setPopupInfo] = useState(null);
  const [viewport, setViewport] = useState({
    latitude: 37.103271,
    longitude: -8.67322,
    width: "100vw",
    height: "100vh",
    zoom: 15
  });

  return (
    <div className="nav" style={navStyle}>
      <ReactMapGL
        {...viewport}
        mapboxApiAccessToken={Token}
        mapStyle="mapbox://styles/rony01/ckixt8aio63dm19qm4ahve96q"
        onViewportChange={(viewport) => {
          setViewport(viewport);
        }}
      >
        <div>
          <NavigationControl
            onViewportChange={(viewport) => {
              setViewport(viewport);
            }}
          />
          {markerList.map((marker, index) => {
            <div key={index}>
              <Marker longitude={marker.long} latitude={marker.lat}>
                <PinDropIcon
                  name="Location"
                  size="small"
                  onMouseEnter={(e) => {
                    e.preventDefault();
                    setPopupInfo(true);
                  }}
                  onMouseLeave={(e) => {
                    e.preventDefault();
                    setPopupInfo(null);
                  }}
                />
              </Marker>
              {renderPopup(index)}
            </div>;
          })}
        </div>
      </ReactMapGL>
    </div>
  );
}

当我执行 npm start 时，自定义地图会显示，但上面没有图标标记。我做错了什么？为什么不呈现标记图标及其弹出信息？

请告诉我

Answer 1

您的循环没有返回 JSX。切换到这个来修复：

          {markerList.map((marker, index) => (
            <div key={index}>
              <Marker longitude={marker.long} latitude={marker.lat}>
                <PinDropIcon
                  name="Location"
                  size="small"
                  onMouseEnter={(e) => {
                    e.preventDefault();
                    setPopupInfo(true);
                  }}
                  onMouseLeave={(e) => {
                    e.preventDefault();
                    setPopupInfo(null);
                  }}
                />
              </Marker>
              {renderPopup(index)}
            </div>
          ))}

注意：请注意别针是深色的，因此很容易错过它们。