无法从Google地方自动填充中选择 [英] Cannot select from Google places autocomplete

问题描述

我正在开发一个在Android上运行的离子应用程序。在特定的屏幕上，我有一个谷歌地图和一个搜索框。我使用谷歌地图的手机差距插件来获取原生地图，而不是使用Google Maps JavaScript API，因为它太慢了。

搜索框自动完成使用以下代码从google获取地点 -

  input = document.getElementById'search-input'
 autocomplete = new google.maps.places.Autocomplete（输入）
  

这会自动完成输入字段。问题是我无法从autocomplete下拉菜单中选择任何选项。

我的HTML代码 -

 < ion-content scroll =false> 
 
< div id =searchBox> 
< input id =search-input> 
< / div> 
< div id =map-canvas> 
 
< / ion-content> 
  

map-canvas 包含地图。我试着添加 ng-focus =disableTap（）来输入搜索输入。

disableTap = - >
container = document.getElementsByClassName'pac-container'
angular.element（container）.attr'data-tap-disabled'，'true'
angular.element（container）.on'点击'， - >
document.getElementById（'search-input'）。blur（）

解决方案在此链接

但这不起作用。这里有什么投入？我在我的智慧结束这里。

解决方案

下面为我工作。
来自user @ TillaTheHun0 ：

  .controller（'MyCtrl'，function（$ scope）{
 $ scope.disableTap = function（）{
 container = document.getElementsByClassName 'pac-container'）; 
 //禁用离子数据选项卡
 angular.element（container）.attr（'data-tap-disabled'，'true'）; 
 // leave如果选择了google-address-entry，则输入字段
 angular.element（container）.on（click，function（）{
 document.getElementById（'searchBar'）。blur（）; 
 $ b}）; 
}; 
}）
  

I am developing an ionic app to be run on Android. On a particular screen, I have a google maps and a search box. I have used the phone gap plugin for the google maps to get the native map instead of using Google Maps Javascript API as it is too slow.

The search box is autocomplete to get places from google using the following code -

input = document.getElementById 'search-input'
autocomplete = new google.maps.places.Autocomplete(input)

This turns the input field with autocomplete for places from google. The problem is that I am not able to select any of the options from the autocomplete dropdown.

My HTML code -

<ion-content scroll="false">

   <div id="searchBox">
     <input id="search-input">
   </div>
   <div id="map-canvas">

</ion-content>

The map-canvas holds the map. I tried adding ng-focus="disableTap()" to input search-input.

disableTap = ->
   container = document.getElementsByClassName 'pac-container'
   angular.element(container).attr 'data-tap-disabled', 'true'
   angular.element(container).on 'click', ->
        document.getElementById('search-input').blur()

I found this solutions at this link

But this does not work. Any inputs here? I'm at my wits end here.

解决方案

The below worked for me. From user @TillaTheHun0 :

.controller('MyCtrl', function($scope) {
  $scope.disableTap = function(){
    container = document.getElementsByClassName('pac-container');
    // disable ionic data tab
    angular.element(container).attr('data-tap-disabled', 'true');
    // leave input field if google-address-entry is selected
    angular.element(container).on("click", function(){
        document.getElementById('searchBar').blur();
    });
  };
})

这篇关于无法从Google地方自动填充中选择的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！