Question

我正在开发一款混合移动应用。我按照以下链接获取移动应用的谷歌位置。在输入时我会在下拉列表中获取位置列表但是只要选择一个位置，下拉列表就会隐藏，我无法在Iphone和android中选择一个值。此问题仅在移动设备中出现。

Visit <http://jsfiddle.net/mwDQr/1/>

Answer 1

问题是谷歌会动态添加需要数据点按禁用属性的元素，因此您必须在谷歌将这些元素添加到dom后手动添加该属性。

$scope.disableTap = function() {
        var container = document.getElementsByClassName('pac-container');
        angular.element(container).attr('data-tap-disabled', 'true');
        var backdrop = document.getElementsByClassName('backdrop');
        angular.element(backdrop).attr('data-tap-disabled', 'true');
        angular.element(container).on("click", function() {
            document.getElementById('pac-input').blur();
        });
    };

现在将ng-change ='disableTap（）'添加到您的输入中：

<input id="pac-input" type="text" placeholder="Search Location" data-tap-disabled="true" ng-change='disableTap()' ng-model="search">

Answer 2

为什么不使用这个模块/指令：https://github.com/wpalahnuk/ngAutocomplete

以下是Ionic的一个例子：

＆＃13;

if

＆＃13;

angular.module('app', ['ionic','ngAutocomplete', 'ngMap'])

.controller('MapCtrl', ['$scope', 'NgMap', 
function($scope, NgMap) {
  
  $scope.autocomplete;
  
  NgMap.getMap().then(function(map) {
    $scope.map = map;
    var input = document.getElementById('Autocomplete');
    $scope.autocomplete = new google.maps.places.Autocomplete(input);
    $scope.autocomplete.bindTo('bounds', map);
    google.maps.event.addListener($scope.autocomplete, "place_changed", function() {
        var place = $scope.autocomplete.getPlace();
        if (place && place.geometry) {
          map.setCenter(place.geometry.location);
          
          $scope.data = {
            lat: place.geometry.location.lat(),
            lng: place.geometry.location.lng()
          };
          $scope.$apply();
          console.log($scope.data);
        }
    });
        
  });

}]);

＆＃13;

#map {
  width: 100%;
  height: 100% !important;
}

＆＃13;

或者Plunker：http://plnkr.co/edit/d3eE7PENJFEzbla4os8z?p=preview

无法选择谷歌地图下拉值

2 个答案: