JSFiddle转VSCode失败，如何修复Mapbox地图代码使其可运行？

要让你的Mapbox地图代码在VSCode本地环境正常运行，需要做以下关键调整：

1. 手动引入Mapbox依赖资源 #

JSFiddle环境默认帮你处理了外部依赖加载，但本地HTML文件必须手动引入Mapbox的CSS和JS文件，且要保证Mapbox的JS脚本在你的自定义代码之前加载，否则会找不到mapboxgl对象。

2. 修复代码中的无效配置 #

你的代码里有两处影响显示的小问题：

• 填充图层的id设为空字符串，Mapbox无法正确识别这个图层，改成类似maine-fill的有效ID
• 轮廓图层的line-width设为0，导致边框完全不可见，调整为合适的数值（比如2）

3. 整理完整的HTML文档结构 #

把CSS放入<style>标签，JS放入<script>标签，确保整个页面有完整的HTML骨架（包含<html>、<head>、<body>标签）。

完整可运行的代码示例 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Mapbox Local Demo</title>
    <!-- 引入Mapbox CSS -->
    <link href="https://api.mapbox.com/mapbox-gl-js/v2.15.0/mapbox-gl.css" rel="stylesheet">
    <!-- 引入Mapbox JS -->
    <script src="https://api.mapbox.com/mapbox-gl-js/v2.15.0/mapbox-gl.js"></script>
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        #map {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 100%;
        }
    </style>
</head>
<body>
    <div id="map"></div>
    <script>
        mapboxgl.accessToken = 'pk.eyJ1IjoiMWRyaXZlYnV5IiwiYSI6ImNsNjN1NjhjejBhZjYzaW44YXN0MzByb3YifQ.mykT1INa7Fbkk4VqIpdM_Q';
        const map = new mapboxgl.Map({
            container: 'map', // container ID
            style: 'mapbox://styles/mapbox/light-v11', // style URL
            center: [-68.137343, 45.137451], // starting position
            zoom: 5 // starting zoom
        });

        map.on('load', () => {
            // 添加GeoJSON数据源
            map.addSource('maine', {
                'type': 'geojson',
                'data': {
                    'type': 'Feature',
                    'geometry': {
                        'type': 'Polygon',
                        'coordinates': [
                            [
                                [-125.15625000000001, 48.04870994288686],
                                [-124.71679687499999, 43.32517767999296],
                                [-125.15625000000001, 39.639537564366684],
                                [-121.11328124999999, 34.59704151614417],
                                [-121.11328124999999, 34.59704151614417],
                                [-117.158203125, 32.47269502206151],
                                [-105.732421875, 31.27855085894653],
                                [-97.20703125, 25.64152637306577],
                                [-84.287109375, 29.84064389983441],
                                [-80.947265625, 24.84656534821976],
                                [-74.970703125, 35.38904996691167],
                                [-66.62109375, 45.02695045318546],
                                [-68.73046875, 47.39834920035926],
                                [-71.455078125, 44.84029065139799],
                                [-82.880859375, 41.96765920367816],
                                [-88.154296875, 48.22467264956519],
                                [-109.072265625, 49.03786794532644],
                                [-123.134765625, 49.15296965617042],
                                [-125.15625000000001, 48.04870994288686],
                            ]
                        ]
                    }
                }
            });

            // 添加填充图层
            map.addLayer({
                'id': 'maine-fill',
                'type': 'fill',
                'source': 'maine',
                'layout': {},
                'paint': {
                    'fill-color': '#0080ff',
                    'fill-opacity': 0.2
                }
            });
            // 添加轮廓图层
            map.addLayer({
                'id': 'outline',
                'type': 'line',
                'source': 'maine',
                'layout': {},
                'paint': {
                    'line-color': '#000',
                    'line-width': 2
                }
            });
        });
    </script>
</body>
</html>

内容的提问来源于stack exchange，提问作者Ali'sCode