Question

我正在使用Google Maps自动填充API来帮助选择输入字段的位置。问题是，如果我尝试将输入值用于Firebase或类似的东西，它只会保存我在选择自动完成之前键入的内容。请参阅此CodePen：https://codepen.io/Auzy/pen/KWRjNp?editors=1111我一直在使用下面的console.log来尝试反映自动填充值。

用法很基本，所以我很惊讶我没有看到更多这个问题。

HTML：

<div class="container">
    <div class="form-group">
        <label for="exampleInputPassword1">Address</label>
        <input v-model="newPost.address" type="text" class="form-control" id="searchTextField" placeholder="Address">
    </div>
    <div class="place"></div>
</div>

JS

const searchInput = document.getElementById('searchTextField');
const autocomplete = new google.maps.places.Autocomplete(searchInput);

searchInput.addEventListener("change", () => {
    setTimeout(function() {
        let addr = searchInput.value;
        let embed = "<label for='exampleInputPassword1'>Map Preview</label><iframe frameborder='0' scrolling='no' marginheight='0' marginwidth='0' src='https://maps.google.com/maps?&amp;q=" + encodeURIComponent(addr) + "&amp;output=embed'></iframe>";

        $('.place').html(embed);
    }, 200);
    console.log(searchInput.value)

});

Answer 1

这有点棘手，因为place是一个对象，您看到的自动完成结果是从Place对象的属性派生的。

因此，我所做的解决方法是组合两个地方属性 - place.name和place.formatted_address。您可以找到full list here。

以下是我从full demo调整的Place Autocomplete sample from Google。

var place = autocomplete.getPlace();
var inputValue = place.name + " " + place.formatted_address;
console.log(inputValue);

示例自动完成演示

寻找：悉尼歌剧院

自动填充结果 威尔逊停车场 - 悉尼歌剧院，麦格理街，悉尼，新南威尔士州，澳大利亚

获取输入值： 威尔逊停车场 - 悉尼歌剧院2 Macquarie St，Sydney NSW 2000，Australia

寻找：自由女神像

自动填充结果 自由女神像出发，纽约，纽约，美国

获取输入值： 自由女神像出发纽约，NY 10004，美国

您可以看到结果几乎完全相同。您现在可以使用变量inputValue（这是自动完成结果的几乎相同的副本），无论您想要什么。希望这会有所帮助。

获取地图自动填充作为输入值

1 个答案: