Google Maps Places API V3自动完成-在输入时选择第一个选项

丹尼尔·格雷佐:

我已根据http://web.archive.org/web/20120225114154/http://code.google.com:80/intl/sk-SK/apis/在我的输入框中成功实现了Google Maps Places V3自动完成功能。 maps / documentation / javascript / places.html它工作得很好,但是当用户按下Enter键时,我很想知道如何从建议中选择第一个选项。我想我需要一些JS魔术,但是我对JS非常陌生,并且不知道从哪里开始。

提前致谢!

躲闪者:

在我最近工作的网站上实现自动完成功能时,我遇到了同样的问题。这是我想出的解决方案:

$("input").focusin(function () {
    $(document).keypress(function (e) {
        if (e.which == 13) {
            var firstResult = $(".pac-container .pac-item:first").text();

            var geocoder = new google.maps.Geocoder();
            geocoder.geocode({"address":firstResult }, function(results, status) {
                if (status == google.maps.GeocoderStatus.OK) {
                    var lat = results[0].geometry.location.lat(),
                        lng = results[0].geometry.location.lng(),
                        placeName = results[0].address_components[0].long_name,
                        latlng = new google.maps.LatLng(lat, lng);

                        $(".pac-container .pac-item:first").addClass("pac-selected");
                        $(".pac-container").css("display","none");
                        $("#searchTextField").val(firstResult);
                        $(".pac-container").css("visibility","hidden");

                    moveMarker(placeName, latlng);

                }
            });
        } else {
            $(".pac-container").css("visibility","visible");
        }

    });
});

http://jsfiddle.net/dodger/pbbhH/

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

Chrome自动填充功能涵盖了Google Maps API v3的自动完成功能

CORS和Google Maps Places自动完成API调用

带有jQuery自动完成插件的Google Maps Api v3位置搜索

Google Maps Places API在附近搜索以自动签入

Google Maps API v3唯一标记JS

如何计算Google Maps Places API的配额?

Google Maps v3 API错误

从 Google Places api 自动完成获取时区

Google 自动完成 Places API 错误 InvalidValueError

Google Places 自动完成 Api 2019

在Google Maps API v3中仅打开一个InfoWindow

Angular 2 + Google Maps Places自动完成功能,在输入后追加[Dom操作]

Google Places API:了解Places自动完成响应的解析

Google Maps API v3:我可以使用ExtJS 4.2在组合框中创建地方自动完成功能吗?

google.maps.places。自动完成语言输出

Google Maps Places自动完成搜索任何位置

Google Maps Places自动填充缺少的几何

在Google Maps API v3中使用多个标记自动对中地图

响应式 Google Maps API v3 - 在小屏幕上自动显示所有标记

Google Maps v3 API - 自动平滑放大到标记

Google Maps MarkerClusterer v3和jQuery自动完成导致错误

如何以编程方式输入搜索字符串并触发Google Maps API的places_changed?

JavaScript / SASS:如何根据输入字段的宽度覆盖Google Maps API v3自动填充下拉菜单的默认宽度?

如何使用 Google Maps API 从 Places 中获得一致的 City、State 和 Country 值?

使用可拖动的Google Maps API V3在输入字段中获取标记地址

如何使用Google Maps API v3优化10个以上的地址

Google Maps Places:为什么需要API密钥?

Google Maps v3 API地理编码和视口不一致

Google Maps自动完成功能会自动选择第一个建议,并在页面加载时自动提交搜索?