0

我正在使用 react 项目，因此按照本指南创建了带有尾风 Css 的create-react-app ： https://tailwindcss.com/docs/guides/create-react-app，在我的项目中，我需要有 Map 以便我可以获取最近的位置等等。所以遵循这个指导方针：https ://github.com/visgl/react-map-gl 并且还从https://studio.mapbox.com/获得了访问令牌和 Mapbox 样式. 我无法弄清楚我无法在我的网页上显示地图的原因是什么。谷歌搜索并尝试了 Stackoverflow 中提到的几乎所有选项，但似乎没有什么对我有用。有人建议在 craco.config.js 文件中添加 babel 加载器规则，但也没有运气。谁能帮我解决这个问题。将不胜感激！提前致谢

在此处输入图像描述

我的 Map.js 文件：

import { useState } from "react";
import ReactMapGL, { Marker, Popup } from "react-map-gl";
//import getCenter from "geolib/es/getCenter";

// Adding Custom Environment Variables
function Map() {
  const [viewport, setViewport] = useState({
    width: "100",
    height: "400",
    latitude: 37.7577,
    longitude: -122.4376,
    zoom: 11,
  });

  return (
    <div>
      <h2 className="text-red-500">Map box map goes here....</h2>
      <ReactMapGL
        mapStyle="mapbox://styles/mapbox/ckszotu58a7dz17qh8ysv970j"
        mapboxApiAccessToken={process.env.REACT_APP_MAPBOX_ACCESS_TOKEN}
        {...viewport}
        onViewportChange={(viewport) => setViewport(viewport)}
      ></ReactMapGL>
    </div>
  );
}

export default Map;

//======================================================
 App.js file rendering it:
<main>
  <section className="bg-gray-900 hidden xl:inline-flex xl:min-w-[300px]">
    <Map />
  </section>
</main>


// craco.config.js
module.exports = {
  style: {
    postcss: {
      plugins: [require("tailwindcss"), require("autoprefixer")],
    },
  },
  babel: {
    loaderOptions: {
      ignore: ["./node_modules/mapbox-gl/dist/mapbox-gl.js"],
    },
  },
};




// in package.json added the last two lines too

"browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all",
      "not chrome < 51",  // this
      "not safari < 10"   // and this
    ],
4

1 回答 1

0

有 2 个潜在问题可能会阻止您的地图显示。

  1. 确保mapStyle来自 Studio 的 mapbox 并mapboxApiAccessToken正确配对。
  2. 视口中的宽度和高度必须包含单位

您可以从这个最小示例开始，然后添加您需要的其他功能（例如 Marker、Popup 等）。

import React from "react";
import ReactMapGL from "react-map-gl";

function Map() {
  const [viewport, setViewport] = React.useState({
    width: "100px", //or full width then set width: "100vw",
    height: "400px", //full height then set height: "100vh",
    latitude: 37.7577,
    longitude: -122.4376,
    zoom: 11
  });

  return (
    <ReactMapGL
      mapStyle="mapbox://styles/mapbox/ckszotu58a7dz17qh8ysv970j"
      mapboxApiAccessToken={process.env.REACT_APP_MAPBOX_ACCESS_TOKEN}
      onViewportChange={(viewport) => setViewport(viewport)}
      {...viewport}
    ></ReactMapGL>
  );
}

export default Map;
于 2021-09-01T11:17:07.243 回答