无法从 Google Maps Javascript API 的自动完成中选择地址

Posted 2023-03-14

【中文标题】无法从 Google Maps Javascript API 的自动完成中选择地址

【英文标题】：Cannot select address from autocomplete on Google Maps Javascript API

【发布时间】：2015-11-03 10:03:53

【问题描述】：

设置是 PhoneGap 应用上的 Google Maps javascript API (v3)，我设置了自动完成功能：

var that = this
this.autocomplete = new google.maps.places.Autocomplete(domNode)
this.listener = google.maps.event.addListener(
  this.autocomplete, 'place_changed', function (place) 
    var place = that.autocomplete.getPlace()
    ...
  
)

这段代码适用于我的 android 版本和浏览器。问题是当我在 ios 下运行它时。我在搜索框中键入一个字符串，显示自动完成结果，但单击其中一个只会关闭下拉列表，但结果不会填充到搜索框中。侦听器也不会触发。 Javascript 控制台上没有显示错误。

这都是谷歌的代码，所以我不知道如何调试。任何帮助，将不胜感激。谢谢！

【参考方案1】：

在我的一个项目中，我一直在努力解决 iPhone 上的相同问题，经过数小时的调查，发现该问题是由 fastclick lib 引起的。

FastClick.prototype.onTouchEnd = function(event) 
    ...
    if (!this.needsClick(targetElement)) 
        event.preventDefault();
        this.sendClick(targetElement, event);
    

    return false;
;

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

    // Don't send a synthetic click to disabled inputs (issue #62)
    case 'button':
    case 'select':
    case 'textarea':
        if (target.disabled) 
            return true;
        

        break;
    case 'input':

        // File inputs need real clicks on iOS 6 due to a browser bug (issue #68)
        if ((this.deviceIsIOS && target.type === 'file') || target.disabled) 
            return true;
        

        break;
    case 'label':
    case 'video':
        return true;
    

    return (/\bneedsclick\b/).test(target.className);
;

因为.pac-container 只有div 和span，FastClick 假定它不可点击并调用preventDefault，为了克服这个问题，我将needsclick 类添加到所有.pac-* 元素

【讨论】：

请参阅***.com/a/20056485/1823675，了解如何将类添加到.pac-* 元素。