reactjs - 标记在 mapboxgl react 项目中显示在 map 之外

Question

我是第一次使用 mapboxgl。我从github上找到了源代码。 map 工作正常，但标记显示在 map 之外。不明白是什么问题..

代码如下_

import React, { Component } from "react";
import ReactDom from "react-dom";
import mapboxgl from "mapbox-gl";

mapboxgl.accessToken =
  "pk.eyJ1Ijoibml0dGFuYW5kbyIsImEiOiJja3AzeGsxdXUxd2dtMnBvMjFncHV2MWQzIn0.T3wHeHz_mCHk1AcExPm8mA";

const data = [
  {
    location: "Panthapath",
    city: "Dhaka",
    state: "Bangladesh",
    coordinates: [90.38382231219224, 23.75296142856617],
  },
];

class Gmap extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      lng: 90.38382231219224,
      lat: 23.75296142856617,
      zoom: 16,
    };
  }
  componentDidMount() {
    const map = new mapboxgl.Map({
      container: this.mapContainer,
      style: "mapbox://styles/mapbox/streets-v11",
      center: [this.state.lng, this.state.lat],
      zoom: this.state.zoom,
    });

    data.forEach((location) => {
      console.log(location);
      var marker = new mapboxgl.Marker()
        .setLngLat(location.coordinates)
        .setPopup(
          new mapboxgl.Popup({ offset: 30 }).setHTML(
            "<h4>" + location.city + "</h4>" + location.location
          )
        )
        .addTo(map);
    });
  }
  render() {
    return (
      <div>
        <div
          ref={(el) => (this.mapContainer = el)}
          style={{ width: "80%", height: "80vh", margin: "0 auto" }}
        />
      </div>
    );
  }
}
export default Gmap;

在终端中显示错误“标记已定义但从未使用过”。但是 map 正在按预期加载，标记超出了 map 部分

Answer 1

您可以在 App.js 中导入 mapbox-gl.css 文件。这对 nextjs 也有效。在 next.js 中，如果您的 Map 组件在其中，您可以将其添加到 pages/next.js 中。

import 'mapbox-gl/dist/mapbox-gl.css';