函数内onMount不随响应式变量触发，谷歌地图自动补全实现问题

问题根源 #

你当前的写法存在两个核心问题：

1. onMount是Svelte的客户端初始化钩子，仅在组件挂载时执行一次，把它放进inputChange函数后，响应式变量变更时不会重新触发onMount，导致自动补全服务无法重复调用。
2. 直接移除onMount后，代码可能在服务端渲染阶段执行（比如SvelteKit），此时window对象不存在，触发Google Maps加载报错。

修正方案 #

将Google Maps的初始化逻辑放在onMount中（确保仅在客户端执行），单独用响应式语句监听输入变量的变化，调用自动补全服务：

<script>
  import { onMount } from 'svelte';
  import { Loader } from '@googlemaps/js-api-loader';

  // 假设你已定义mapOptions、bookDetails、predictionsArray
  let google;
  let autocompleteService;
  const loader = new Loader({
    apiKey: '你的API密钥',
    libraries: ['places']
  });

  onMount(async () => {
    try {
      // 加载Google Maps API，仅在客户端执行
      google = await loader.load();

      // 初始化地图（如果需要保留这部分逻辑）
      const map = new google.maps.Map(document.getElementById('map'), mapOptions);
      const markerPickUp = new google.maps.Marker({
        position: { lat: 14.6012, lng: 120.975 },
        map: map
      });

      // 初始化自动补全服务，只需要一次
      autocompleteService = new google.maps.places.AutocompleteService();
    } catch (e) {
      console.error('Google Maps加载失败:', e);
    }
  });

  // 响应式监听输入变化，调用自动补全
  $: if (autocompleteService && $bookDetails.dropOffLocation.trim()) {
    const sessionToken = new google.maps.places.AutocompleteSessionToken();
    autocompleteService.getPlacePredictions(
      { input: $bookDetails.dropOffLocation, sessionToken },
      (predictions, status) => {
        if (status !== google.maps.places.PlacesServiceStatus.OK || !predictions) {
          predictionsArray = [];
          return;
        }
        predictionsArray = predictions;
        console.log(predictionsArray);
      }
    );
  } else if (!$bookDetails.dropOffLocation.trim()) {
    // 输入为空时清空建议列表
    predictionsArray = [];
  }
</script>

<!-- 你的输入框和地图DOM -->
<input bind:value={$bookDetails.dropOffLocation} placeholder="输入地址" />
<div id="map"></div>

关键说明 #

• onMount确保Google Maps API仅在客户端DOM加载完成后加载，避免服务端渲染时的window未定义错误。
• 自动补全服务autocompleteService只初始化一次，无需每次输入都重新创建。
• 响应式语句$: ...直接监听$bookDetails.dropOffLocation的变化，仅当服务初始化完成且输入不为空时，才请求自动补全建议。

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