标记显示在 mapboxgl react 项目中的地图之外

Question

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

代码如下_

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;

在终端中显示错误“已定义标记但从未使用过”。但是地图正在按预期加载地图部分的标记