如何在MapBox marker上添加文字？(语言-javascript)

该问题来自社区帖: https://bbs.csdn.net/topics/616362106.为符合问答规范, 该问题经过ChatGPT优化
以下是优化后的问题: 在MapBox marker上添加文字_

Add text to MapBox marker的实现方法如下:

var popup = new mapboxgl.Popup()
  .setText('Description')
  .addTo(map);

let marker = new mapboxgl
  .Marker()
    .setLngLat([-96, 37.8])
    .addTo(map)
    .setPopup(popup);

要在 MapBox 的标记（marker）上添加文字，可以使用 JavaScript 和 Mapbox GL JS 库的 API。

下面是一个示例代码，演示了如何在 MapBox 的标记上添加文字：

// 创建 MapBox 地图实例
mapboxgl.accessToken = 'your_access_token';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v11',
center: [longitude, latitude], // 设置地图中心坐标
zoom: 12 // 设置地图缩放级别
});

// 创建带有文字的标记
var marker = new mapboxgl.Marker()
.setLngLat([longitude, latitude]) // 设置标记的位置坐标
.addTo(map);

// 创建标记上的文字元素
var el = document.createElement('div');
el.className = 'marker-text';
el.innerHTML = 'Text';

// 将文字元素添加到标记上
marker.getElement().appendChild(el);

上述代码中，需要设置 your_access_token 为您的 MapBox Access Token。您还需要设置 longitude 和 latitude 来指定标记的位置坐标。将文字添加到标记上时，我们创建了一个 <div> 元素来包含文字，并使用 appendChild() 方法将其添加到标记的元素中。

要将文字根据样式进行自定义，您可以使用 CSS 来设置标记文字的样式。例如，您可以创建一个自定义的 CSS 类 .marker-text 来设置文字的样式，如字体、颜色、大小等。

.marker-text {
font-family: Arial, sans-serif;
color: red;
font-size: 12px;
}

通过修改上述示例中的 el.className，将其设置为您自己的 CSS 类名，即可应用所需的样式。

请注意，确保在引入 Mapbox GL JS 库之前包含了正确的 CSS 和 JavaScript 文件。

通过以上步骤，您就可以在 MapBox 的标记上添加自定义的文字了。