SvelteKit 中的 Google API 自动完成

Question

我正在构建一个应用程序，我需要从 API 获取返回值并将其绑定到我的变量。我已经被这个问题困扰了好几天了，无法继续下去。

这是我的代码：

<script>
  let address = "";
async function addExample() {
        const response = await fetch(
            "https://api",
            {
                method: "PUT",
                headers: {
                    "api-key":
                        "api-key",
                },
                body: JSON.stringify({
                    address: address,           
                }),
            }
        );
    }
</script>


<svelte:head>
    <script
        src="https://maps.googleapis.com/maps/api/js?key=my-key&libraries=places&callback=initAutocomplete"
        async
        defer
    >
    </script>

    <script>
        let autocomplete;
        function initAutocomplete() {
            const input = document.getElementById("autocomplete");
            const options = {
                componentRestrictions: { country: "au" },
                strictBounds: false,
            };
            const autocomplete = new google.maps.places.Autocomplete(
                input,
                options
            );
        }

        autocomplete.addListener("place_changed", onPlaceChanged);

        function onPlaceChanged() {
            address = autocomplete.getPlace();
        }
    </script>

</svelte:head>

<input
                    id="autocomplete"
                    placeholder="address"
                    type="text"
                    bind:value={address}
                /><br />

我尝试将我的标签添加到标签svelte:head内script，但它不起作用，除其他尝试外，由于我缺乏经验，我希望我是否以正确的方式执行此操作，而不是在这方面浪费更多时间。PS：我现在不需要创建地图或类似的东西。我只想将自动完成的值绑定到我的变量，这样我就能够将数据提取到数据库中。

我已经尝试了所有我能在谷歌上找到的东西，但没有一个成功。我对这一切都很陌生，我不知道还能想什么/尝试什么。

Answer 1

我也无法弄清楚如何从 访问变量svelte:head。对我有用的是使用 Google Maps JS API 加载器，而不是将脚本放在svelte:head. 这适用于那些想要使用Google Places 自动完成功能的预构建自动完成小部件的人。

要安装，请运行：

npm i @googlemaps/js-api-loader

然后在您的 中+page.svelte，您可以使用onMount来加载它。

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

let autocomplete;
let address;

const options = {
    componentRestrictions: { country: 'au' },
    strictBounds: false
    };


onMount(() => {
  const loader = new Loader({
    apiKey: 'GOOGLE_MAPS_API_KEY',
    version: 'weekly',
    libraries: ['places']
    });

  loader.loadCallback((e) => {
    if (e) {
      console.log(e);
    } else {
      autocomplete = new google.maps.places.Autocomplete(
      document.getElementById('autocomplete'),
      options
    );

    autocomplete.addListener('place_changed', onPlaceChanged);
    }
});

  function onPlaceChanged() {
    address = autocomplete.getPlace();

    console.log(address.formatted_address);
    }
});
</script>

<input type="text" name="autocomplete" id="autocomplete" autocomplete="off" />
<pre>{JSON.stringify(address)}</pre>