Google Places API：place_changed 未触发答案

【问题标题】：Google Places API: place_changed not firedGoogle Places API：place_changed 未触发
【发布时间】：2018-03-29 00:22:28
【问题描述】：

我遇到了包括 Google Places API 在内的问题。我已经使用 API 密钥设置了所有内容，列表/建议效果很好，但是当我选择建议时，place_changed 事件不会被触发。

检查小提琴：https://jsfiddle.net/xj2d77be/3/

它应该可以工作，但我完全不知道为什么它不工作。

代码 sn-p（来自已发布的小提琴）：

$(document).ready(function() {
  var autocomplete = new google.maps.places.SearchBox(document.getElementById('mapLocation'));
  google.maps.event.addListener(autocomplete, 'place_changed', function() {
    var place = autocomplete.getPlace();
    console.log(place);
  });
  console.log("Initialized")
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.google.com/maps/api/js?libraries=places"></script>
<input type="text" id="mapLocation" />

【问题讨论】：

标签： javascript google-maps google-places-api

【解决方案1】：

试试这个，这会起作用我已经更新了你的代码，

https://jsfiddle.net/xj2d77be/4/

$(document).ready(function() {
    var autocomplete = new google.maps.places.Autocomplete($("#mapLocation")[0]);
        google.maps.event.addListener(autocomplete, 'place_changed', function() {
            var place = autocomplete.getPlace();
            console.log(place);
        });
    console.log("Initialized")
});

使用搜索框：

https://jsfiddle.net/xj2d77be/5/

$(document).ready(function() {
    var searchBox = new google.maps.places.SearchBox(document.getElementById('mapLocation'));
        searchBox.addListener('places_changed', function() {
            var place = searchBox.getPlaces();
            console.log(place);
        });
    console.log("Initialized")
});

【讨论】：

谢谢！但我不知道为什么“SearchBox”不起作用。我从 Google 中找到了一个示例，其中他们也使用了 SearchBox——状态为“places_change”。
@KevinLieser 关注此链接，developers.google.com/maps/documentation/javascript/examples/…
这就是我所说的页面：如你所见，他们初始化var searchBox = new google.maps.places.SearchBox(input);
@kevinLieser 请检查我的答案，我已经使用搜索框更新了示例

【解决方案2】：

SearchBox 没有“place_changed”事件或.getPlace() 函数。应该是“places_changed”和.getPlaces()。

Documentation:

方法

getPlaces() 返回值：数组

返回用户选择的查询，如果还没有找到任何地点，则返回 null，用于 places_changed 事件。

活动

places_changed 参数：无

当用户选择查询时会触发此事件，getPlaces 应该用于获取新地点。

注意：.getPlaces() 函数返回一个数组而不是单个位置。

$(document).ready(function() {
  var autocomplete = new google.maps.places.SearchBox(document.getElementById('mapLocation'));
  google.maps.event.addListener(autocomplete, 'places_changed', function() {
    var place = autocomplete.getPlaces();
    console.log(place);
  });
  console.log("Initialized")
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.google.com/maps/api/js?libraries=places"></script>
<input type="text" id="mapLocation" />

【讨论】：

【解决方案3】：

对我来说，place_changed 事件会在我刷新页面之前触发，然后它不会再触发（在本地网页上使用 Google Chrome）。您必须重新启动 Chrome 或关闭开发者工具并刷新页面才能再次触发事件。

【讨论】：