智能定位表单字段

Question

我有一个单一的文本字段在用户注册表格上的位置。

本质上，我希望这个字段能够通过Google (或等价物)验证--只允许有效的位置通过(理想的格式是滑铁卢、伦敦或英国伦敦)。

需求

1. 和一个位置名一样，我也希望返回该位置中心的协调器(lat，lng)，因为我将交叉引用它，以便向用户提供相关信息。
2. 是一个基于有效位置(理想情况下只是政治位置，而不是特定街道)的自动列表/智能建议列表，因为用户正在输入字段*(编辑：见下文)。
3. 迫使用户使用自动完成列表中的一个位置。

g 211

允许使用HTML5地理定位API获得用户lng的权限将被自动填充，然后转换到一个通用位置(即普通城镇--有点像Chrome在点击“添加您的位置”时所做的Tweetdeck )。

问题是-做这件事最好的方法是什么？我应该使用什么API？我应该使用API的哪些部分来实现这一点？

*编辑：在试验Google v3地理编码之后，似乎出现了一个关于结果的问题(一个bug或通过设计我不确定-- http://code.google.com/p/gmaps-api-issues/issues/detail?id=2042)。例如，如果我输入滑铁卢，我得到的是滑铁卢，加拿大。其他所有的水龙头http://en.wikipedia.org/wiki/Waterloo呢？我想要一个X多的列表(其中X !== 1)供用户选择。理想情况下，我预先定义了X。此外，如果我在表单字段中键入“L”，我希望看到一个按最有可能(可能受偏倚GeocodeRequest参数影响)的顺序返回的相关建议列表--因此，伦敦、英国、利物浦、英国、利兹、英国等。相反，我得到了荷兰林堡-1随机结果。见鬼？通过Google实现这一点的替代方案是什么？

*Update/Solution：，好吧，我想出了一个使用geonames http://jsfiddle.net/ekzMN/95/的小东西。虽然我相信它可以得到很大的改进，但它的工作还不错。大家都可以随意使用这段代码。在我的真实世界中，我还添加了google地理代码作为第二源，因为它比geonames聪明得多(也就是说，如果我输入邮政编码或街道地址)。这取决于地球编码器的非职业化：

// Get more specific results from Google geocode
geocoder.geocode( { 'address': request.term, 'region': 'GB' }, function(results, status) {
    $.map(results, function(item) {

        var ignore = ['route', 'country', 'natural_feature', 'intersection', 'premise', 'subpremise', 'airport', 'park', 'point_of_interest', 'establishment', 'transit_station'];

        if (valid_location(item.types, ignore) == 1) {                  
            var sublocality;
            var locality;
            var region;
            var country;

            $.each(item.address_components, function (i, data) {
                if ($.inArray('sublocality', data.types) > -1) {
                    sublocality = data.long_name;
                }
                if ($.inArray('locality', data.types) > -1) {
                    if (typeof sublocality == 'undefined') {
                        sublocality = data.long_name;
                    }
                }
                if ($.inArray('administrative_area_level_2', data.types) > -1) {
                    locality = data.long_name;
                }
                if ($.inArray('administrative_area_level_1', data.types) > -1) {
                    region = data.long_name;
                }
                if ($.inArray('country', data.types) > -1) {
                    country = data.long_name;
                }
            });

            if ((country != 'United Kingdom') || ($.inArray('administrative_area_level_1', item.types) == -1)) {

                var location = format_location(sublocality, locality, region, country);

                if (duplicate(matches, location) == 0) {
                    matches.push({
                        label: location,
                        value: location,
                        latitude: item.geometry.location.lat(),
                        longitude: item.geometry.location.lng()
                    });
                }                       
            }
        }
    });
    // Update autocomplete
    response(matches);
})

两者的结合很好地提供了智能搜索和多种建议。困扰我的一个问题是，当我同时使用两个源(geonames & google地理代码)时，输入选择范围非常不可靠--有时它会自动填充、选择附加部分，然后按它应该的方式保持高亮显示，其他时候蓝色高亮显示显示不正确(尽管它的作用仍然在那里，也就是在按键上按下选择边框)，还有一些时候光标直接到达输入的末尾。与谷歌地图的冲突，我认为，而不是多源问题，因为这不会发生，如果我有两个地名来源而不是？

正确的答案适用于任何能够改进这一点的人！

谢谢

Answer 1

好的..。因此，看看你的“解决方案”，我注意到了几个问题。首先，它完全破坏了我尝试的每一个浏览器.

经过一些修正之后，我发现了您的“解决方案”中的一些问题：

1. .autocomplete()是一个初始化函数。不需要在每个keyup上调用它。这是在对.autocomplete()元素调用jQuery之后自动处理的。在每个consequences.
2. Storing上调用它将造成巨大的性能损失，以及全局变量中的许多其他神秘和/或意外的keyup合法值，然后使用blur来检查这些值是个坏主意。虽然我并没有接受存储来自autocomplete的每一项法律价值的想法，但目前我想不出更好的解决方案。我所做的就是将每个合法值存储在输入项的.data()中，以便在.blur()上进行检查。这是作为散列/关联数组存储的，这意味着我们可以免费删除重复项。
3. 如果您希望用户只从后端选择合法值，最好的解决方案是根据表单提交上的后端验证输入。(Blur存在问题，因为从autocomplete建议中选择项本身就会在填充所选值之前模糊输入。换句话说，您很可能有一个无效的位置。)这将要求您保存一个字符串，作为匹配数据的一部分，该字符串可以发送回服务器进行验证。另一个问题是，如果您的服务器速度较慢，例如GeoNames免费访问，您可能无法立即得到用户的反馈.

。

尽管如此，我已经将您的代码(关于上面的第1点和第2点)固定为正确调用autocomplete，并将有效的解决方案存储在input对象中作为jQuery数据。我还将其编码为扩展，因此可以在任何jQuery选择器上调用它：

http://jsfiddle.net/jtbowden/7NmLr/

Answer 2

这里有一页相关的jQuery插件：http://plugins.jquery.com/plugin-tags/geocoding

具体而言，对于你的问题：

默认情况下，

1. Google地理编码就是这样做的。它将给出一个广泛区域的中心坐标等相关问题：using jquery.getJson with Google's GeoCoding HTTP Service
2. http://code.google.com/p/geo-autocomplete/是
3. 的一个例子，这在很大程度上是形式验证。您应该能够简单地完成最后的自动完成查找，如果它不返回任何建议，则标记警告等

。

至于该使用哪些部分，这取决于您。更进一步，我们会为你写的。我相信上面的许多API都有你可以从中收集的例子。