如何使用mapbox在同一坐标上设置多个标记？

我使用mapbox GL引用了位于非洲的视频游戏公司。所有这些公司都放在地图上：

当我有多个具有相同坐标的标记时，例如喀麦隆雅温得的两家公司，mapbox只显示第一个标记，因为它们具有相同的纬度和经度

如何显示具有相同坐标的所有标记

提前谢谢

<%@ include file="/init.jsp"%>
<div class="shadow row">
    <div class=" col-12 rounded-sm " id='map'
        style='height: 800px;'></div>

</div>


<script>
    mapboxgl.accessToken = 'pk.eyJ1Ijoia29zdGVkIiMWQzbXA3M2ZxYmd5MnkifQ.faOl-gGzibR9yMpZ-i7FTQ';
    var map = new mapboxgl.Map({
        container : 'map',
        style : 'mapbox://styles/mapbox/streets-v11',
        zoom : 2
    // starting zoom
    });

    // Add zoom and rotation controls to the map.
    map.addControl(new mapboxgl.NavigationControl());

    var studioListComplete = [];

    <c:forEach var="studio" items="${studioList}">

    studioListComplete
            .push({
                "type" : "Feature",
                "properties" : {
                    "description" : "<strong>${studio.studioName} (${studio.country})</strong> <br/><br/>" + 
                                    "${studio.studioDescription}<br/><br/>"+
                                    "<strong>City : </strong>${studio.city}<br/>"+
                                    "<strong>Number of employees : </strong>${studio.numberOfEmployees}<br/>"+
                                    "<strong>Phone : </strong>${studio.phoneNumber}<br/><br/>"+

                                    "<a href=\"${studio.webSiteUrl}\" target=\"_blank\">Please visit our website</a>",
                    "icon": "rocket"
                },
                "geometry" : {
                    "type" : "Point",
                    "coordinates" : [ "${studio.longitude}",
                            "${studio.latitude}" ]
                }
            });
    //var marker = new mapboxgl.Marker()
    //.setLngLat(["${studio.longitude}", "${studio.latitude}"])
    //.addTo(map);
    </c:forEach>

    console.log(studioListComplete);

    map.on('load', function() {
        // Add a layer showing the places.
        map.addLayer({
            "id" : "places",
            "type" : "symbol",
            "source" : {
                "type" : "geojson",
                "data" : {
                    "type" : "FeatureCollection",
                    "features" : studioListComplete
                }
            },
            "layout" : {
                "icon-image" : "{icon}-15",
                'icon-size': 1,
                "icon-allow-overlap" : true
            }
        });

        // When a click event occurs on a feature in the places layer, open a popup at the
        // location of the feature, with description HTML from its properties.
        map.on('click', 'places', function(e) {
            var coordinates = e.features[0].geometry.coordinates.slice();
            var description = e.features[0].properties.description;

            // Ensure that if the map is zoomed out such that multiple
            // copies of the feature are visible, the popup appears
            // over the copy being pointed to.
            while (Math.abs(e.lngLat.lng - coordinates[0]) > 180) {
                coordinates[0] += e.lngLat.lng > coordinates[0] ? 360 : -360;
            }

            new mapboxgl.Popup().setLngLat(coordinates).setHTML(description)
                    .addTo(map);
        });

        // Change the cursor to a pointer when the mouse is over the places layer.
        map.on('mouseenter', 'places', function() {
            map.getCanvas().style.cursor = 'pointer';
        });

        // Change it back to a pointer when it leaves.
        map.on('mouseleave', 'places', function() {
            map.getCanvas().style.cursor = '';
        });
    });
</script>

<style>
    //Style is here

</style>

mapboxgl.accessToken='pk.eyJ1Ijoia29zdGVkIiMWQzbXA3M2ZxYmd5MnkifQ.faOl-gGzibR9yMpZ-i7FTQ'；
var map=new mapboxgl.map({
容器：“映射”，
风格：'mapbox://styles/mapbox/streets-v11',
缩放：2
//开始缩放
});
//向地图添加缩放和旋转控件。
addControl（新的mapboxgl.NavigationControl（））；
var studioListComplete=[]；
研究报告完成
.推({
“类型”：“功能”，
“财产”：{
“描述”：“${studio.studioName}（${studio.country}）

”+
“${studio.studioDescription}

”+
“城市：${studio.City}
”+
“员工人数：${studio.numberOfEmployees}
”+
“电话：${studio.phoneNumber}

”+
"",
“图标”：“火箭”
},
“几何学”：{
“类型”：“点”，
“坐标”：[“${studio.longitude}”，
“${studio.latitude}”]
}
});
//var marker=new mapboxgl.marker（）
//.setLngLat（[“${studio.longitude}”，“${studio.latitude}]”）
//.addTo（地图）；
控制台日志（studiolistplete）；
map.on（'load'，function（））{
//添加一个显示位置的图层。
map.addLayer({
“id”：“地点”，
“类型”：“符号”，
“来源”：{
“类型”：“geojson”，
“数据”：{
“类型”：“FeatureCollection”，
“功能”：学习完成
}
},
“布局”：{
“图标图像”：“{icon}-15”，
“图标大小”：1，
“图标允许重叠”：真
}
});
//当places图层中的要素发生单击事件时，在
//功能的位置，以及其属性中的HTML描述。
地图上（'click'，'places'，功能（e）{
var coordinates=e.features[0]。geometry.coordinates.slice（）；
var description=e.features[0]。properties.description；
//确保如果缩小地图，使多个
//该功能的副本可见，弹出窗口出现
//在指向的副本上方。
而（数学abs（e.lngLat.lng-坐标[0]）>180）{
坐标[0]+=e.lngLat.lng>坐标[0]？360:-360；
}
新建mapboxgl.Popup（）.setLngLat（坐标）.setHTML（说明）
.addTo（地图）；
});
//当鼠标位于places图层上时，将光标更改为指针。
on（'mouseenter'，'places'，function（）{
map.getCanvas（）.style.cursor='pointer'；
});
//离开时将其更改回指针。
map.on（'mouseleave'，'places'，function（）{
map.getCanvas（）.style.cursor=''；
});
});
//风格就在这里

如果希望为具有相同坐标的点显示两个离散标记，最好是稍微修改其中一个点的纬度和经度，使其不直接位于另一个点的顶部

---

或者，如果不选择修改坐标数据，则可以探索对数据进行聚类，以便从视觉上清楚地看到多个公司位于同一个集群中。演示如何使用默认圆形层创建簇并设置簇样式，以及如何高度自定义可视簇。

谢谢您的回答。目前，我们按照您的建议更改纬度和经度。我认为我们将使用集群解决方案，这是最好的解决方案。谢谢