jquery - 电话间隙 : Google Maps' SearchBox/Autocomplete NOT Working on iOS/Mobile

标签 jquery google-maps google-maps-api-3 cordova phonegap-build

我正在使用 Google Maps APIv3、jQuery 1.9.1、JQuery Mobile 1.3.1 和 Phonegap 2.9.0,并修改了我的代码:http://jsfiddle.net/vkpWK/我相信这三行代码一定发生了一些事情:

// Assign Search Box
input = /** @type {HTMLInputElement} */ (document.getElementById('searchTextField')),
searchBox = new google.maps.places.SearchBox(input);

// Event Listener - Move the Map on Search Results
google.maps.event.addListener(searchBox, 'places_changed', function () {

在 Phonegap 中,此代码可以工作,但是当您看到 SearchBox 的建议下拉列表时,您无法单击它们。单击它们不会执行任何操作。我正在寻找一种方法,让对建议的点击实际上触发“places_changed”事件。

让事情变得复杂的是,这里有一个关键点。这段代码有效。它在桌面和 iOS/Android 上按原样运行。您可以单击搜索结果,它会按预期工作, map 将更新到新搜索的位置。然而,它在 Phonegap 中对我不起作用。我有一种不好的预感,这在某种程度上是一个 CSS 问题,或者可能是其他一些 JS 监听器不允许这种情况发生。我如何检验这个理论?

作为替代方案,我使用 google.maps.places.Autocomplete 而不是 google.maps.places.SearchBox 进行了测试,但没有帮助。

谢谢!

最佳答案

将其添加到我的 index.html's 后,我使其正常工作<head> :

<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script> 

此外,如果您能够看到非常小的字体和 UI,请尝试替换此 <meta> :

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, target-densitydpi=medium-dpi, user-scalable=0" />

关于jquery - 电话间隙 : Google Maps' SearchBox/Autocomplete NOT Working on iOS/Mobile,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17559600/

相关文章:

javascript - Google Maps Javascript API v3 热图不显示

javascript - 如何将信息窗口添加到多边形

javascript - 需要使用 jquery 来处理大量数据的简短循环方式

javascript - 从外部网站获取内容?

jquery - 使用 Jquery 动画化多个文本阴影

javascript - 静态元素和动态元素的 CSS 样式区别

android - 无法从android中的谷歌地图中心获取latlong

javascript - 如何单独显示信息框中的标记信息?

javascript - node.js同步mysql查询

javascript - 在 Google map api 中获取带有邻域类型的 formatted_address - 反向地理编码