mapbox gl js中的Cusotm标记不起作用？

我试图使用他们网站上的示例将自定义标记添加到mapbox地图中，但每次我用我的链接（相同的照片格式）或任何链接替换它们的链接时，如果有人能够向我展示一个带有自定义照片/标记的工作示例，则照片不会渲染。我需要它来工作使用这个例子，我能够以另一种方式添加自定义标记，但我需要使用.addSource和.addLayer的这种特定方式

mapboxgl.accessToken = 'pk.eyJ1IjoibWFya2V0aW5nYnNvIiwiYSI6ImNrYnYwZmk3YjAxZjgyem1wY2Zmc3F4Y2EifQ.gMF-eCCaAHHgWIUoRcnfkg';
var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/light-v10',
    center: [-96, 37.8],
    zoom: 3
});

map.on('load', function() {
    // Add an image to use as a custom marker
    map.loadImage(
        'https://docs.mapbox.com/mapbox-gl-js/assets/custom_marker.png', //here is the problem if i try to replace the image 
        function(error, image) {
            if (error) throw error;
            map.addImage('custom-marker', image);
            // Add a GeoJSON source with 2 points
            map.addSource('points', {
                'type': 'geojson',
                'data': {
                    'type': 'FeatureCollection',
                    'features': [
                        {
                            // feature for Mapbox DC
                            'type': 'Feature',
                            'geometry': {
                                'type': 'Point',
                                'coordinates': [
                                    -77.03238901390978,
                                    38.913188059745586
                                ]
                            },
                            'properties': {
                                'title': 'Mapbox DC'
                            }
                        },
                        {
                            // feature for Mapbox SF
                            'type': 'Feature',
                            'geometry': {
                                'type': 'Point',
                                'coordinates': [-122.414, 37.776]
                            },
                            'properties': {
                                'title': 'Mapbox SF'
                            }
                        }
                    ]
                }
            });

            // Add a symbol layer
            map.addLayer({
                'id': 'points',
                'type': 'symbol',
                'source': 'points',
                'layout': {
                    'icon-image': 'custom-marker',
                    // get the title name from the source's "title" property
                    'text-field': ['get', 'title'],
                    'text-font': [
                        'Open Sans Semibold',
                        'Arial Unicode MS Bold'
                    ],
                    'text-offset': [0, 1.25],
                    'text-anchor': 'top'
                }
            });
        }
    );
});

基于，如果从外部域加载该映像，则该域必须支持（跨源资源共享）

由于您没有包括您试图加载的图像，我无法验证它，但它似乎与此相关

已编辑：如果需要启用CORS的服务器上载图像，可以尝试使用任何可用的图像上载服务器，如。但除了简单的PoC之外，我不推荐这种方法

我已经用这个尝试了你的代码

我创造了一个。。。它是有效的，正如前面所说的代码是正确的，但您遇到的问题是，您尝试使用的映像未托管在启用CORS的域中

如果此解决方案解决了您的问题，请将其标记为“已接受答案”，这种方式还将帮助其他用户知道它是正确的解决方案。

基于，如果您从外部域加载该映像，则该域必须支持（跨源资源共享）

由于您没有包括您试图加载的图像，我无法验证它，但它似乎与此相关

已编辑：如果需要启用CORS的服务器上载图像，可以尝试使用任何可用的图像上载服务器，如。但除了简单的PoC之外，我不推荐这种方法

我已经用这个尝试了你的代码

我创造了一个。。。它是有效的，正如前面所说的代码是正确的，但您遇到的问题是，您尝试使用的映像未托管在启用CORS的域中

---

如果此解决方案解决了您的问题，请将其标记为“答案已接受”，这样也可以帮助其他用户知道它是正确的解决方案。

您发布的代码与Mapbox示例中的代码相同，并且有效，如果您发布您正在编写的代码和一个我们可以研究以尝试解决您的问题的代码会更好。您发布的代码与Mapbox示例中的代码相同，并且有效。如果您发布您正在编写的代码和一个我们可以研究以尝试解决您的问题的代码会更好。它不适用于任何图像，我尝试了多个图像，即使从google Images来看，这也是关键，没有任何域接受CORS，这是您需要隐式配置的东西。是否有任何理由将url指向另一个域？你不能将映像下载到你的域吗？我在mapbox项目中有自己的代码，带有自定义标记，因为图像托管在CORS域中，或者在运行页面的同一域中。我需要它来自url，您知道我可以在哪里托管它，以便它接受CORS吗？如果我想从本地链接它，我只需要键入照片？像custom marker.png？一样，用解决方案编辑了我的答案，包括在启用CORS的域中的何处托管图像，以及在演示中的处理。如果答案解决了您的问题，请将其标记为“答案已接受”。非常感谢！它不适用于任何图像，我尝试了多个图像，甚至来自谷歌图像。这就是问题所在，没有任何域接受CORS，这是您需要隐式配置的东西。是否有任何理由将url指向另一个域？你不能将映像下载到你的域吗？我在mapbox项目中有自己的代码，带有自定义标记，因为图像托管在CORS域中，或者在运行页面的同一域中。我需要它来自url，您知道我可以在哪里托管它，以便它接受CORS吗？如果我想从本地链接它，我只需要键入照片？像custom marker.png？一样，用解决方案编辑了我的答案，包括在启用CORS的域中的何处托管图像，以及在演示中的处理。如果答案解决了您的问题，请将其标记为“答案已接受”。非常感谢！