Автозаполнение автозаполнения Google Places перестает работать на телефонах Angular-Material

Есть несколько сообщений на SoF о том, что они не работают на телефонах. например: Cannot select from Google places autocomplete Автозаполнение автозаполнения Google Places перестает работать на телефонах Angular-Material

Ни один из решений не работал для меня. И я знаю, что это угловой материал. Попробуйте эти две простых страниц по телефону:

Не работает (попробуйте нажав на предложения): https://my-rainy-tests-42.herokuapp.com/test1.html

работы: https://my-rainy-tests-42.herokuapp.com/test2.html

Единственное различие между ними состоит в том, что в во-вторых, я удалил зависимость от углового материала.

код Источника:

<!DOCTYPE html> 
<html lang="en"> 

<head> 

    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> 

    <meta charset="utf-8"> 

    <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/angular_material/1.1.0-rc2/angular-material.min.css"> 
    <link href="//fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> 
    <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic"> 

    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script> 
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.min.js"></script> 
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-aria.min.js"></script> 
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-messages.min.js"></script> 

    <script src="//ajax.googleapis.com/ajax/libs/angular_material/1.1.0-rc2/angular-material.min.js"></script> 

    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/4.14.1/lodash.min.js"></script> 

</head> 

<body ng-app="app"> 

<div style="position: relative; height: 100%"> 

    <input id="pac-input" class="controls" type="text" placeholder="Search Box"> 
    <div id="map"></div> 
</div> 

<script type="text/javascript"> 
    angular.module('app', ['ngMaterial']); // <--- remove ngMaterial and everything is fine! 

    function initMap() { 
     var input = document.getElementById('pac-input'); 
     var searchBox = new google.maps.places.SearchBox(input); 
    } 
</script> 

<script src="//maps.googleapis.com/maps/api/js?v=3&key=AIzaSyAFCOzkHUaXjZQYmbi55ovFCGHRsh9QoS0&libraries=places&callback=initMap" async defer></script> 
</body> 

</html>

источник

2016-09-03 Kasra

не уверен, что если вы все еще нужны, но решение выглядит следующим образом:

во время приложения конфигурации, отключить щелчок угон, поэтому угловой материал оленьей кожи угнать водопроводные краны.

.config(function ($mdGestureProvider) { 
     // For mobile devices without jQuery loaded, do not 
     // intercept click events during the capture phase. 
     $mdGestureProvider.skipClickHijack(); 
    })

источник

2017-08-13 00:10:17

Автозаполнение автозаполнения Google Places перестает работать на телефонах Angular-Material

ответ

Смежные вопросы