javascript - docs - ionic icon

IONIC: haga clic en el evento que toma tiempo para seleccionar lugares de la API de Google Places.

Question

Soy nuevo en IONIC. Estoy tratando de usar google places api en mi aplicación iónica. Puedo obtener los lugares a través de la API de Google Places. Pero el problema es que tengo que presionar durante mucho tiempo la opción de autocompletar en la aplicación o la selección no se refleja en la aplicación.

Aquí está mi código 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>

Y este es mi 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

La solución para este problema se analiza en https://github.com/driftyco/ionic/issues/1798 . El problema es que Google agrega dinámicamente elementos que necesitan la propiedad de datos deshabilitados, por lo que tendrá que agregar manualmente la propiedad después de que Google haya agregado estos elementos a la 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();
});
};

ahora agregue ng-change=''disableTap()'' a su input :

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

El enlace github usa ng-focus pero ng-change funcionó mejor para mí porque a veces los elementos generados no existían aún cuando se disparaba el foco.