Svelte项目中Google Maps API如何访问外部脚本中的对象？

核心原因 #

问题出在执行顺序：Google Maps初始化逻辑运行时，顶部脚本从数据库获取的points还没加载完成，或是变量作用域未正确关联，导致报points is not defined。setTimeout能临时解决是因为它延迟了地图初始化，给数据库请求留足了返回数据的时间，但这是投机取巧的办法，稳定性无法保证。

靠谱解决方案 #

1. 用Svelte响应式语句触发地图初始化

把points声明为响应式变量，当它有值时自动执行地图初始化：

<script>
  import { onMount } from 'svelte';
  let points = [];

  // 模拟从数据库获取points的异步逻辑
  async function fetchPoints() {
    const res = await fetch('/api/points');
    points = await res.json();
  }

  // 响应式监听points变化，有数据时初始化地图
  $: if (points.length > 0) {
    initMap();
  }

  function initMap() {
    const map = new google.maps.Map(document.getElementById('map'), {
      center: { lat: -34.397, lng: 150.644 },
      zoom: 8,
    });
    // 遍历points添加地图标记
    points.forEach(point => {
      new google.maps.Marker({
        position: { lat: point.lat, lng: point.lng },
        map: map,
        title: point.name,
      });
    });
  }

  onMount(async () => {
    await fetchPoints();
    // 避免API未加载完成的情况
    if (window.google) initMap();
  });
</script>

<div id="map" style="width: 100%; height: 400px;"></div>

2. 等待API和数据都就绪再执行

如果是通过外部script标签加载Google Maps API，用Promise封装API加载和数据请求，等两者都完成后再初始化地图：

<script>
  let points = [];

  // 封装Google Maps API加载的Promise
  function loadGoogleMaps() {
    return new Promise((resolve) => {
      if (window.google) {
        resolve(window.google);
        return;
      }
      const script = document.createElement('script');
      script.src = `https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY`;
      script.onload = () => resolve(window.google);
      document.head.appendChild(script);
    });
  }

  // 封装数据库请求
  async function fetchPoints() {
    const res = await fetch('/api/points');
    return res.json();
  }

  // 同时等待API加载完成和数据返回
  async function init() {
    const [google, pointsData] = await Promise.all([
      loadGoogleMaps(),
      fetchPoints()
    ]);
    points = pointsData;
    // 初始化地图
    const map = new google.maps.Map(document.getElementById('map'), {
      center: { lat: -34.397, lng: 150.644 },
      zoom: 8,
    });
    points.forEach(point => {
      new google.maps.Marker({
        position: { lat: point.lat, lng: point.lng },
        map: map,
      });
    });
  }

  init();
</script>

<div id="map" style="width: 100%; height: 400px;"></div>

3. 确保points的作用域可被地图逻辑访问

如果是作用域问题（比如顶部脚本的points不在Google Maps初始化函数的作用域内），要确保points是组件的响应式变量，而非孤立的全局变量。Svelte组件脚本默认是模块作用域，把地图初始化函数放在同一个组件脚本里，或是通过参数传递points，就能解决作用域不匹配的问题。

关键要点 #

• 永远不要依赖setTimeout解决异步加载顺序问题，网络波动时仍会触发错误。
• 利用Svelte的响应式系统或Promise的all方法，确保数据和API都就绪后再执行地图逻辑。
• 保持points的响应式特性，后续数据库数据更新时，地图也能同步更新标记。

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