SvelteKit跨Script标签赋值：将place值赋给address变量

问题描述 #

在SvelteKit项目中，有两个不在同一script标签内的变量：一个是与输入框bind:value双向绑定的address，另一个是通过Google Places Autocomplete的place_changed事件获取到的格式化地址place。尝试用全局变量将place赋值给address实现同步但未成功，需要可行的解决方法。

原代码如下：

<script>
let address = "";
</script>
<div class="address">
    <label for="">Address: </label> <br />
    <script src="https://maps.googleapis.fsdfsdfcom/maps/api/js?key=s&libraries=places"></script>
    <input id="autocomplete" placeholder="address" type="text" bind:value={address} />
    <br />
    <script>
        let autocomplete = new google.maps.places.Autocomplete(
            document.getElementById("autocomplete"),
            { componentRestrictions: { country: "au" } }
        );
        autocomplete.addListener("place_changed", () => {
            var place = autocomplete.getPlace().formatted_address;
        });
    </script>
</div>

解决方法 #

Svelte不推荐在组件模板中嵌套多个script标签，正确的做法是把Google Maps加载、Autocomplete初始化逻辑统一放到组件生命周期钩子中，直接复用组件内变量实现同步：

修改后的完整代码

<script>
    import { onMount } from 'svelte';
    let address = "";
    let autocompleteInput; // 通过bind:this绑定输入框元素，替代getElementById

    onMount(async () => {
        // 动态加载Google Places脚本
        const script = document.createElement('script');
        script.src = `https://maps.googleapis.com/maps/api/js?key=你的API密钥&libraries=places`;
        script.async = true;
        // 等待脚本加载完成
        await new Promise(resolve => {
            script.onload = resolve;
            document.head.appendChild(script);
        });

        // 初始化Autocomplete
        const autocomplete = new google.maps.places.Autocomplete(autocompleteInput, {
            componentRestrictions: { country: "au" }
        });

        // 监听地址选择事件，直接修改组件内的address变量
        autocomplete.addListener("place_changed", () => {
            const place = autocomplete.getPlace();
            if (place.formatted_address) {
                address = place.formatted_address;
            }
        });
    });
</script>

<div class="address">
    <label>Address: </label> <br />
    <input 
        bind:this={autocompleteInput} 
        placeholder="address" 
        type="text" 
        bind:value={address} 
    />
    <br />
</div>

关键说明

• 用bind:this绑定输入框元素，比document.getElementById更贴合Svelte组件化逻辑，避免DOM查找的潜在问题
• 在onMount钩子中动态加载Google脚本，确保DOM渲染完成、脚本加载完毕后再初始化Autocomplete
• onMount回调处于组件作用域内，可直接访问address变量，修改后双向绑定会自动同步到输入框

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