Javascript Angular Google map 自动完成 Api 不起作用

Question

我正在尝试使用以下代码以 Angular 方式设置谷歌地图API:HTML:

<div ng-value="initMap()"> 
          <div>
          <input id="pac-input" type="text"
                  value="{{event_foundaddress}}"  ng-model="event_foundaddress"/> <!-- placeholder breaks EVERYTHING!!!! No placeholder!!!-->
          </div>

          <div  id="map" style="width: 300px; height: 400px" > </div>

          <div > Found address: {{event_foundaddress}} </div>
       </div>

JS/Angular

$scope.initMap = function() {
    var map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: $scope.lat, lng: $scope.long},//london coords
    zoom: 13
  });
  $scope.foundaddress = $localStorage.event.address
  var input = /** @type {!HTMLInputElement} */
      (document.getElementById('pac-input'));
     //$scope.event_foundaddress
  //alert('in:'+input)
  map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
  //var types = document.getElementById('type-selector');
  //map.controls[google.maps.ControlPosition.TOP_LEFT].push(types);
  //alert(input)
  var autocomplete = new google.maps.places.Autocomplete(input,{types: ['geocode']});
  autocomplete.bindTo('bounds', map);


  var infowindow = new google.maps.InfoWindow();
  var marker = new google.maps.Marker({
    map: map,
    anchorPoint: new google.maps.Point(0, -29)
  });


  autocomplete.addListener('place_changed', function() {...


  }

我收到错误 InvalidValueError: not an instance of HTMLInputElement from the var autocomplete = new google.maps.places.Autocomplete(input,{types: ['geocode']});。显然输入不是 HTMLInputElement。你知道如何以 Angular 方式从 dom 传递 HTMLInputElement 吗？

编辑:放置一个警报('输入')显示输入变量始终为空...不知道为什么？

Answer 1

我遇到了同样的问题，您必须在输入元素的 ng-focus 上调用 initMap() 。然后它就会起作用。

但问题是，即使更新我的代码后，模型也没有更新。然后我转移到 angular-google-places-autocomplete 库。

那个图书馆很棒。查看https://github.com/kuhnza/angular-google-places-autocomplete

编辑:答案已更新您只需按如下方式编写，一旦选择位置，foundaddress 将具有 Google 地点对象，您必须从中提取 formatted_address。

<input ng-model="foundaddress" type="text" id="pac-input" g-places-autocomplete></input>