使用 SvelteKit 创建 Mapboxmap 会导致 500 Internal Error

Question

我试图用 mapbox 和 svelte 套件渲染一个基本的 map。 地图框代码直接来自此处的示例： https://docs.mapbox.com/help/tutorials/choropleth-studio-gl-pt-2/

我只想在src/lib/mapboxmap.svelte -compontent 中创建这个 map，将其导入+page -route 并渲染它。 但是我总是收到 500 内部错误。

我想我只是误解了一些东西。 可能是关于 svelte kit 的工作原理。 这是最小的mapboxmap.svelte组件：

<script>
    import mapboxgl from 'mapbox-gl';
    import 'mapbox-gl/dist/mapbox-gl.css';

    // define access token
    mapboxgl.accessToken =
        'pk.eyJ1Ijoicm9iaW5rb2hycyIsImEiOiJjanU5am95bm4xZnZ6NDNrOTRyYTYwdzJzIn0.iMFQgQIlhz36wB3819Xftw';

    // create map
    const map = new mapboxgl.Map({
        container: 'map', // container id
        style: 'mapbox://styles/examples/cjgioozof002u2sr5k7t14dim' // map style URL from Mapbox Studio
    });

    console.log('map: ', map);
</script>

然后我将它导入到他src/routes/+page.svelte路由中，如下所示：

<script>
    import Mapboxmap from '../lib/mapboxmap.svelte';
</script>

<Mapboxmap />

这是结果：

我认为这可能是一个愚蠢的问题，但我现在找不到解决方案

Answer 1

您需要在 onMount 块中移动 mapbox 初始化部分。 否则，此代码将在服务器端运行，而 mapbox 服务器不会喜欢它，加上 DOM 未初始化，容器“地图”尚不存在（更不用说您实际上必须将其插入 HTML 块中）。 类似的东西会起作用：

<script>
    import {onMount} from 'svelte'
    import mapboxgl from 'mapbox-gl';
    import 'mapbox-gl/dist/mapbox-gl.css';
    let map;

    onMount(async()=>{
        mapboxgl.accessToken =
        'pk.eyJ1Ijoicm9iaW5rb2hycyIsImEiOiJjanU5am95bm4xZnZ6NDNrOTRyYTYwdzJzIn0.iMFQgQIlhz36wB3819Xftw';

        // create map
        map = new mapboxgl.Map({
            container: 'map', // container id
            style: 'mapbox://styles/examples/cjgioozof002u2sr5k7t14dim' // map style URL from Mapbox Studio
        });
    })
</script>
<div id="map">