我无法让 Mapbox 在我的 Next.js 应用程序中工作

Question

我尝试过使用react-map-gl库，但没有成功。我已经完成了文档中显示的操作：https://docs.mapbox.com/mapbox-gl-js/guides/，但它对我不起作用。这是我的代码：

import mapboxgl from "mapbox-gl";
import "mapbox-gl/dist/mapbox-gl.css";

mapboxgl.accessToken =
  "here i put my api key";

const map = new mapboxgl.Map({
  container: "map",
  style: "mapbox://styles/mapbox/streets-v12",
  center: [-74.5, 40],
  zoom: 9,
});

export default function Home() {
  return <div id="map" />;
}

当我运行它时，我收到此错误：

TypeError: Cannot read properties of undefined (reading 'mark')

抱怨这条线：

const map = new mapboxgl.Map({...

我尝试修改 webpack 来处理加载工作文件，我认为无论如何这都是不必要的，但这也不起作用。

如果您有任何想法，我们将不胜感激:)

Answer 1

点击此链接在您的 Next.js 项目中实现 Mapbox：https://docs.mapbox.com/help/tutorials/use-mapbox-gl-js-with-react/

考虑使用 userRef 而不是声明常量变量。同时将“dist/xxx.css”导入移动到

pages/index

或

pages/app

Answer 2

地图工作之前我的代码：

import mapboxgl from "mapbox-gl";
import "mapbox-gl/dist/mapbox-gl.css";

mapboxgl.accessToken =
  "ACCESS_TOKEN";

const map = new mapboxgl.Map({
  container: "map",
  style: "mapbox://styles/mapbox/streets-v12",
  center: [-74.5, 40],
  zoom: 9,
});

export default function Home() {
  return <div id="map" />;
}

地图工作后我的代码：

import mapboxgl from "mapbox-gl";
import "mapbox-gl/dist/mapbox-gl.css";
import { useEffect, useRef } from "react";
import styles from "../styles/index.module.scss";

export default function Home() {
  const mapContainer = useRef<any>(null);
  const map = useRef<mapboxgl.Map | any>(null);

  useEffect(() => {
    mapboxgl.accessToken =
      "ACCESS_TOKEN";

    map.current = new mapboxgl.Map({
      container: mapContainer.current,
      style: "mapbox://styles/mapbox/streets-v12",
      center: [-1.46389, 53.296543],
      zoom: 13,
    });
  }, []);

  return (
    <div id="map">
      <div className={styles.style1} ref={mapContainer} />
    </div>
  );
}