react中使用BMapGL地图展示

要引入mapbox-gl和@mapbox/mapbox-gl-language这两个包，百度搜索下

import React from 'react';
import mapboxgl from "mapbox-gl";
import MapboxLanguage from "@mapbox/mapbox-gl-language";
// require('https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.js')
mapboxgl.setRTLTextPlugin(
  "https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-rtl-text/v0.1.0/mapbox-gl-rtl-text.js"
);
interface IProps {
  lat: number;
  lon: number;
}

export default class Map extends React.Component {
// export default function Map(props: IProps): JSX.Element {
  // var { lat, lon } = this.props;
  Fun() {
    mapboxgl.accessToken =
  "pk.eyJ1IjoiaGZhbmRlbmciLCJhIjoiY2tndnY4cW9rMDQ1aTJydXBxY2NmZTl2YiJ9.f3klJxU6ZaXonxzcAch2Ng";
  const map = new mapboxgl.Map({
    container: "map",
    style: "mapbox://styles/mapbox/light-v9",
    center: [+this.props.lon, +this.props.lat],
    zoom: 2.9,
  });
  map.addControl(
    new MapboxLanguage({
      defaultLanguage: "zh",
    })
  );
  new mapboxgl.Marker({
    draggable: false,
  })
    .setLngLat([+this.props.lon, +this.props.lat]) //添加marker的初始化点
    // .setPopup(popup)
    .addTo(map); //在哪个地图中添加
  }
  componentDidMount() {
    this.Fun()
  }
  render() {
    return (
      <div id="map" style={{
        minHeight: '400px',
        justifyContent: 'center',
        position: 'relative',
        overflow: 'hidden',}}
        className="mapbox"
      ></div>
    )
  }
  // return (
  //   // <iframe
  //   //   src={`https://apis.map.qq.com/tools/poimarker?type=0&marker=coord:${lat},${lon};&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77&referer=myapp`}
  //   //   width={400}
  //   //   height={400}
  //   //   frameborder={0}
  //   //   scrolling='no'
  //   //   marginheight={0}
  //   //   marginwidth={0}
  //   // />
  // );
}