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

【问题标题】：Google Map APIs do not work in Angular viewGoogle Map API 在 Angular 视图中不起作用
【发布时间】：2014-10-30 18:06:19
【问题描述】：

我正在尝试使用 Google 地图 API 来为“地点”输入框获取简单的自动完成功能。我正在使用角度路由。

按照 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 apis 的自动完成服务，但它不起作用。

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

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

有什么建议吗？谢谢！

【问题讨论】：

也许可以创建一个 plunker 或者在这里发布最小的工作代码？

标签： javascript jquery angularjs google-maps autocomplete

【解决方案1】：

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

Onload 不适用于 div。见here。

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

【讨论】：

谢谢，现在我想我明白了这个问题。关于将初始化放在控制器中，您的意思是：$scope.initialize=function(){...}; 和调用：$scope.initialize();？如果是这样，您将如何选择输入文本？ var input = document.getElementById('CityInput'); 或者使用ng-model？
我把$scope.initialize=function(){...};，在视图加载时调用$scope.initialize();。我用document.getElementById('CityInput').value; 得到输入框的自动完成值。一切正常。