IONIC：點擊事件需要時間從Google Places api中選擇地點

Question

我是IONIC的新手。我正在嘗試在我的離子應用程序中使用google地方api。我可以通過Google Places API獲取地點。但問題是我必須在應用中長按自動填充選項，否則選擇不會反映在應用中。

這是我的Html代碼。

<script src="http://maps.googleapis.com/maps/api/js?sensor=false&amp;libraries=places"></script>  
<input id="pac-input" class="controls" type="text" placeholder="Search Box" data-tap-disabled="true"> 
<div id="map" data-tap-disabled="true"></div> 

這是我MapController.js

 .controller('MapCtrl', function($scope, $rootScope, $state, $cordovaGeolocation, $ionicLoading, Markers, $ionicPopup, $location, SearchAll, shareData, constants) {   
initAutocomplete(); 

     function initAutocomplete() { 
      console.log("in Map Autocomplete"); 
      var map = new google.maps.Map(document.getElementById('map'), { 
       center: { lat: 19.075984, lng: 72.877656 }, 
       zoom: 13, 
       mapTypeId: google.maps.MapTypeId.ROADMAP 
      }); 

      // Create the search box and link it to the UI element. 
      var input = document.getElementById('pac-input'); 
      var searchBox = new google.maps.places.SearchBox(input); 
      // map.controls[google.maps.ControlPosition.TOP_LEFT].push(input); 

      // Bias the SearchBox results towards current map's viewport. 
      map.addListener('bounds_changed', function() { 
       searchBox.setBounds(map.getBounds()); 
      }); 

      var markers = []; 
      // [START region_getplaces] 
      // Listen for the event fired when the user selects a prediction and retrieve 
      // more details for that place. 
      searchBox.addListener('places_changed', function() { 
       var places = searchBox.getPlaces(); 

       console.log("in searchBox Listner"); 

       if (places.length == 0) { 
        return; 
       } 

       console.log("Places : ", places); 
       console.log("LAT : ", places[0].geometry.location.lat()); 
       console.log("LAONG : ", places[0].geometry.location.lng()); 
       // Clear out the old markers. 
       markers.forEach(function(marker) { 
        marker.setMap(null); 
       }); 
       markers = []; 

       // For each place, get the icon, name and location. 
       var bounds = new google.maps.LatLngBounds(); 
       places.forEach(function(place) { 
        var icon = { 
         url: place.icon, 
         size: new google.maps.Size(71, 71), 
         origin: new google.maps.Point(0, 0), 
         anchor: new google.maps.Point(17, 34), 
         scaledSize: new google.maps.Size(25, 25) 
        }; 

        // Create a marker for each place. 
        markers.push(new google.maps.Marker({ 
         map: map, 
         icon: icon, 
         title: place.name, 
         position: place.geometry.location 
        })); 

        if (place.geometry.viewport) { 
         // Only geocodes have viewport. 
         bounds.union(place.geometry.viewport); 
        } else { 
         bounds.extend(place.geometry.location); 
        } 
       }); 
       map.fitBounds(bounds); 
      }); 
      // [END region_getplaces] 
     } 
}); 

Answer 1

在https://github.com/driftyco/ionic/issues/1798討論這個問題的解決方案。問題是谷歌動態地添加了需要數據挖掘禁用屬性的元素，所以你必須在谷歌已經將這些元素添加到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'); 
    // leave input field if google-address-entry is selected 
    angular.element(container).on("click", function() { 
     document.getElementById('pac-input').blur(); 
    }); 
}; 

現在添加ng-change='disableTap()'您input：

<input ng-change='disableTap()' id="pac-input" class="controls" type="text" placeholder="Search Box" data-tap-disabled="true"> 

GitHub的鏈接使用ng-focus但ng-change工作對我來說更好，因爲有時生成的元素並沒有被時間焦點被解僱存在。