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

问题描述

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

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

我正在复制以下 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 时会显示自定义地图，但上面没有图标标记。我做错了什么？为什么标记图标及其弹出信息未呈现？

请告诉我

解决方法

您的循环没有返回 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>
          ))}

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