谷歌地图API在Angular视图中不起作用

Google Map APIs do not work in Angular view

本文关键字：不起作用 视图 Angular API 谷歌地图      更新时间：2023-09-26

我正在尝试使用谷歌地图api，以便为"Place"输入框获得一个简单的自动完成功能。我正在使用有角度的路线。

按照谷歌给开发者的指示，在<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">

这个输入字段应该有来自Googleapi的自动完成服务，但它不起作用。

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

我想不出这个观点出了什么问题。我试着放onload="initializeGoogleApi()"在视图的body标签（主模板）和外部div中都没有成功。

有什么建议吗？谢谢

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

加载在div上不起作用。请参见此处。

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

相关文章：