Svelte接入Mapbox实现基础全屏地图显示异常问题求助

你遇到的问题核心来自两个配置缺失：

• 初始化时机错误：Svelte 组件<script>内的同步代码执行时，组件内部的DOM节点还未挂载到页面，Mapbox 无法找到不存在的#map容器，因此首次运行无渲染。你后续在index.html手动添加的#map容器不属于Svelte组件管理，样式也没有对应匹配，才会出现小范围显示的问题。
• 全局高度未配置：CSS百分比高度需要继承父元素的高度属性，你仅给#map设置100%宽高，但它的上层节点body、html都没有配置高度，也没有清除默认边距，导致高度计算值不符合全屏预期。

无需修改main.js，直接替换App.svelte内容即可：

<script>
  // 引入Svelte生命周期钩子，保证组件挂载后再初始化地图
  import { onMount } from 'svelte'
  import mapboxgl from "mapbox-gl";
  // 替换为你自己的Mapbox有效Token
  mapboxgl.accessToken = '你的Mapbox Token'

  // 直接绑定DOM元素变量，无需用ID查询更稳妥
  let mapContainer;
  onMount(() => {
    const map = new mapboxgl.Map({
      container: mapContainer,
      style: "mapbox://styles/mapbox/light-v10",
      center: [16.37, 48.2],
      zoom: 12,
    });
    // 可选：添加默认导航控件，可按需删除
    map.addControl(new mapboxgl.NavigationControl())
  })
</script>

<svelte:head>
  <!-- 引入Mapbox GL官方样式，原assembly是UI组件库不是地图必需样式 -->
  <link
    href="https://api.mapbox.com/mapbox-gl-js/v2.15.0/mapbox-gl.css"
    rel="stylesheet"
  />
</svelte:head>

<div bind:this={mapContainer} id="map" />

<style>
  /* 用:global修饰符修改全局根节点样式，清除默认边距，配置全屏高度 */
  :global(html), :global(body) {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
  #map {
    width: 100%;
    height: 100%;
  }
</style>

修改完成后删除你在index.html中手动添加的<div id="map"></div>代码即可正常运行。

内容的提问来源于stack exchange，提问作者Lenn