Question

我正在尝试使用Google地图apis，以获得一个简单的自动完成功能，用于＆＃34; Place＆＃34;输入框。我正在使用角度路由。

按照Google提供的开发人员的说明，我在主模板的<head>：

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places"></script>
<script src="js/googleAutocomplete.js"></script>

googleAutocomplete.js是

function initializeGoogleApi() {
    var input = document.getElementById('CityInput');
    var options = {
        types: ['(cities)']
    };
    var autocomplete = new google.maps.places.Autocomplete(input, options);
}

并且在我的一个观点中

<input id="CityInput" type="text" name="place" ng-model="profile.place">

此输入字段应该具有来自Google API的自动完成服务，但它无效。

但是，如果我将输入框放在主模板中（即不在视图中），则自动完成功能起作用。

我无法弄清楚视图中出了什么问题。我试过放onload="initializeGoogleApi()" 在body标记（主模板）和视图的外部div中都没有成功。

有什么建议吗？谢谢！

Answer 1

视图中的html在选择之前不在DOM中，因此当主体的onload事件被触发时，输入框不存在。 initializeGoogleApi中的输入为空...

Onload不适用于div。请参阅here。

我能让它工作的唯一方法是将初始化放在该路径的控制器中。

Google Map API在Angular视图中不起作用

1 个答案: