在Angular中使用谷歌自动完成功能

Google autocomplete in Angular

本文关键字:成功 功能 谷歌 Angular      更新时间:2023-09-26

我在Angular中遇到了谷歌自动完成的问题。

结构是带有

的index.html

我有一个页面显示在ng-view - road.html。

Road.html

<input id="locationFrom"  type="text" class="form-control"/>
道路控制器:

 app.controller("roadMapController", function () {
 var input = document.getElementById("locationFrom");
        var autocomplete = new google.maps.places.Autocomplete(input);
}

我在控制台没有错误,输入得到额外的占位符"写位置…",但是当我打字时,没有提示,就像它应该是。

首先将依赖项添加到应用程序中:

angular.module('myApp', ['google.places']);

var defaultBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(-33.8902, 151.1759),
new google.maps.LatLng(-33.8474, 151.2631));
var input = document.getElementById('locationFrom');
var options = {
  bounds: defaultBounds,
  types: ['establishment']
};
autocomplete = new google.maps.places.Autocomplete(input, options);