javascript - 获取 map 自动完成作为输入值

Question

我正在使用 Google map 自动完成 API 来帮助选择输入字段的位置。问题是，如果我尝试获取要在 Firebase 或类似内容中使用的输入值，它只会保存我在选择自动完成之前输入的内容。请参阅此CodePen:https://codepen.io/Auzy/pen/KWRjNp?editors=1111我一直在使用下面的 console.log 来尝试反射(reflect)自动完成值。

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

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);

示例自动完成演示

寻找:悉尼歌剧院

自动完成结果: 威尔逊 parking 场 - 悉尼歌剧院，麦格理街，悉尼，新南威尔士州，澳大利亚

放置获得的输入值: 威尔逊 parking 场 - 悉尼歌剧院 2 Macquarie St, Sydney NSW 2000, Australia

寻找:自由女神像

自动完成结果: 自由女神像出发，纽约，纽约州，美国

放置获得的输入值: 自由女神像出发纽约，NY 10004，美国

可以看到结果几乎一模一样。现在，您可以根据需要使用变量 inputValue(它是自动完成结果的几乎相同的副本)。 希望这会有所帮助。