Проблема автозаполнения Google Places с worklight — не могу нажать

Я пытаюсь заставить Google Places Autocomplete API работать с WorkLight, но, похоже, что-то не так.

При использовании браузера на моем компьютере, когда я начинаю вводить название места, предложения автозаполнения работают нормально, и я могу выбрать одно из них. Но при запуске приложения на мобильном устройстве (Android или iPhone) я могу видеть результаты автозаполнения, но ничего не происходит, когда я нажимаю на них.

Я нашел несколько js-библиотек, которые упрощают работу с GooglePlaces Autocomplete API — я имею в виду, за исключением мобильных устройств (приложение WorkLight/Cordova)

Я также обнаружил, что некоторые люди сообщают об этой проблеме с Cordova. Некоторым удалось решить проблему, добавив класс «needclick» в элемент Google, но у меня это не сработало.

Вот библиотека JS для тестирования: http://ubilabs.github.io/geocomplete/

Ссылка StackOverflow с соответствующей проблемой:

не удается нажать на элемент в списке автозаполнения Google на мобильном устройстве

У кого-нибудь есть идеи для возможного решения?


google-places-api cordova google-places ibm-mobilefirst worklight-runtime
person André Perazzi    schedule 08.07.2014    source источник
comment
Было бы полезно, если бы вы могли предоставить демонстрационный проект...   -  person Idan Adar    schedule 10.07.2014

Ответы (4)


arrow_upward
2
arrow_downward

Я только что попробовал, и это сработало для меня. Это то, что я сделал, дайте нам знать, если вы сделали что-то другое

  1. Создано новое гибридное приложение
  2. Добавлен jquery.geocomplete.js в папку common/js
  3. Код index.html обновлен образцом кода, предоставленным документацией по API.
  4. Протестировано на обычном предварительном просмотре (работает нормально)
  5. Создал среду Android и запустил ее на устройстве Nexus 7 (android 4.4.2) - работал нормально.

Под «работает нормально» я подразумеваю, что я могу видеть список доступных опций, пока я печатаю текстовое поле, и я могу нажать на одну из опций, и она заполнит текстовое поле.

Это код для index.html

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="UTF-8">
        <title>googleplaces</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
        <!--
            <link rel="shortcut icon" href="images/favicon.png">
            <link rel="apple-touch-icon" href="images/apple-touch-icon.png"> 
        -->
        <link rel="stylesheet" href="css/main.css">
        <style type="text/css" media="screen">
        form {
            background: url(https://developers.google.com/maps/documentation/places/images/powered-by-google-on-white.png) no-repeat center right;
        }
</style>
        <script>window.$ = window.jQuery = WLJQ;</script>
    </head>
    <body style="display: none;">
        <form>
      <input id="geocomplete" type="text" placeholder="Type in an address" size="90" />
      <input id="find" type="button" value="find" />
    </form>

        <script src="js/initOptions.js"></script>
        <script src="js/main.js"></script>
        <script src="js/messages.js"></script>
        <script src="http://maps.googleapis.com/maps/api/js?sensor=false&amp;libraries=places"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
        <script src="js/jquery.geocomplete.js"></script>

        <script>
  $(function(){

    $("#geocomplete").geocomplete()
      .bind("geocode:result", function(event, result){
        $.log("Result: " + result.formatted_address);
      })
      .bind("geocode:error", function(event, status){
        $.log("ERROR: " + status);
      })
      .bind("geocode:multiple", function(event, results){
        $.log("Multiple: " + results.length + " results found");
      });

    $("#find").click(function(){
      $("#geocomplete").trigger("geocode");
    });



  });
    </script>
    </body>
</html>
person Leandro David    schedule 24.07.2014

arrow_upward
2
arrow_downward

Попробуйте остановить распространение

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>event.stopImmediatePropagation demo</title>
  <style>
  p {
    height: 30px;
    width: 150px;
    background-color: #ccf;
  }
  div {
    height: 30px;
    width: 150px;
    background-color: #cfc;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>

<p>paragraph</p>
<div>division</div>

<script>
$( "p" ).click(function( event ) {
  event.stopImmediatePropagation();
});
$( "p" ).click(function( event ) {
  // This function won't be executed
  $( this ).css( "background-color", "#f00" );
});
$( "div" ).click(function( event ) {
  // This function will be executed
  $( this ).css( "background-color", "#f00" );
});
</script>

</body>
</html>
person Francine Perazzi    schedule 29.06.2015

arrow_upward
1
arrow_downward

Вы пытались остановить распространение события клика?

$( "p").click(function(event) { event.stopPropagation(); // Делаем что-нибудь });

person Diogo Ebert    schedule 28.06.2015

arrow_upward
1
arrow_downward

Если вы используете Ionic, проблема вызвана атрибутом css «pointer-events:none», установленным ionicModal;

Попробуйте добавить это в свой файл css:

.pac-container {
     pointer-events:auto;
}
person Marius Bedrule    schedule 30.03.2016