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

访问变量。对我有用的是使用谷歌地图JS API加载器而不是将脚本放在

svelte:head

.

要安装，请运行：

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>