带有Jquery Mobile的Google地方信息自动完成功能无法在移动/触摸设备上使用 [英] Google Places Autocomplete with Jquery Mobile not working on mobile/touch device

问题描述

正如标题所示，我正在使用JQuery Mobile(1.3.0)构建一个移动网站，并试图实现Google Places Autocomplete(API v3)以帮助用户输入位置数据.

As title suggests I am building a mobile website with JQuery Mobile (1.3.0) and am trying to implement Google Places Autocomplete (API v3) to aid user input of location data.

自动完成功能在桌面设备上可以正常运行，但在移动设备上不能正常运行(我仅在iOS 6上进行过测试).

The autocomplete functions correctly on desktop device, but not when used on a mobile device (I have only tested on iOS 6).

在移动设备上使用时，确实会出现相关位置的下拉列表，但是当您在不将选择内容加载到地图上的情况下按一下就可以消失.

When used on mobile device the dropdown list of relevant locations do appear, but simply disappear when you press one without loading the selection on the map.

我环顾四周，看到了一些解决方案，这些解决方案可以看到

I have looked around and seen some solutions that sight the z-index of

.pac容器

.pac-container

作为罪魁祸首(请参阅: http: //osdir.com/ml/google-maps-js-api-v3/2012-01/msg00823.html ).

as the culprit (see: http://osdir.com/ml/google-maps-js-api-v3/2012-01/msg00823.html).

我已经实施了这些修复程序，但无济于事，并且我不相信z-index是问题，因为我可以看到所选项目的确在以下时候变为了:悬停状态/颜色在移动设备上按下.

I have implemented these fixes but to no avail, and I am not convinced that z-index is the problem because I can see that the selected item does change to it's :hover state/colour when pressed on mobile.

如果有人有我的建议，请让我知道.

Please if anyone has suggestions I am all ears, need any more details let me know.

推荐答案

感谢Daniel.但是我给出的解决方案会对性能产生一些影响.

Thanks Daniel. But the solution I have given has some performance impact.

我已经稍微修改了FastClick库来完成该操作.

I have modifed the FastClick library little bit to accomplish that.

首先，我在FastClick构造函数中添加了一个参数，其中defaultElCls是不应实现fastclick的元素.

First I have added a param to FastClick constructor, where defaultElCls will be the elements which should not implement fastclick.

function FastClick(layer, defaultElCls) {
    'use strict';
    var oldOnClick, self = this;

    this.defaultElCls = defaultElCls;

然后修改needsClick方法:

FastClick.prototype.needsClick = function(target) {
'use strict';
var nodeName = target.nodeName.toLowerCase();

if (nodeName === 'button' || nodeName === 'input') {

    // File inputs need real clicks on iOS 6 due to a browser bug (issue #68)
    // Don't send a synthetic click to disabled inputs (issue #62)
    if ((this.deviceIsIOS && target.type === 'file') || target.disabled) {
        return true;
    }       
} else if (nodeName === 'label' || nodeName === 'video') {
    return true;
}

return ((/\bneedsclick\b/).test(target.className) || (new RegExp(this.defaultElCls).test(target.className)));

};

然后将pac-item传递给FastClick构造函数

Then pass pac-item to the FastClick constructor

new FastClick(document.body, "pac-item");

希望FastClick库也会注意这一点:)

Hope this will be taken care by FastClick library as well :)

这篇关于带有Jquery Mobile的Google地方信息自动完成功能无法在移动/触摸设备上使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！