如何在mapbox地图上生成textbox？

<script src='https://api.mapbox.com/mapbox-gl-js/v2.6.1/mapbox-gl.js'></script>
<link href='https://api.mapbox.com/mapbox-gl-js/v2.6.1/mapbox-gl.css' rel='stylesheet' />

<div id='map' style='width: 100%; height: 400px;'></div>

mapboxgl.accessToken = 'YOUR_MAPBOX_ACCESS_TOKEN';
var map = new mapboxgl.Map({
  container: 'map',
  style: 'mapbox://styles/mapbox/streets-v11',
  center: [longitude, latitude], // 设置地图中心点的经纬度
  zoom: 12 // 设置地图缩放级别
});

var textBox = document.createElement('div');
textBox.className = 'textbox';
textBox.innerHTML = 'Hello, Mapbox!';

new mapboxgl.Marker(textBox)
  .setLngLat([longitude, latitude]) // 设置文本框的经纬度位置
  .addTo(map);

.textbox {
  background-color: #ffffff;
  border: 1px solid #000000;
  padding: 10px;
  font-size: 14px;
}