谷歌地图自动完成和自动完成服务之间的不同结果 [英] Different result between google maps Autocomplete and AutocompleteService

问题描述

我使用Google Maps APIv3 AutocompleteService将数据提取到引导程序的预先输入。然而，与使用google的内置自动填充功能返回的结果相比，结果有点不准确。

我的HTML代码：

 < label>内置< / label>< input type =textid =address1/> 
< label>自定义< / label>< input type =textid =address2/> 
  

我的脚本：

 <脚本> 
 //此输入使用google内置的自动完成
 var input1 = document.getElementById（'address1'）; 
 autocomplete = new google.maps.places.Autocomplete（input1）; 
 
 //此输入使用google AutocompleteService 
 $（'＃address2'）。typeahead（{
 source：process_keyword 
}）; 
 
 var service = new google.maps.places.AutocompleteService（）; 
 
函数process_keyword（查询，进程）{
 var place_results = []; 
 var request = {
 input：query，
 types：['geocode'] 
}; 
 service.getPlacePredictions（request，function（predictions，status）{
 process（$。map（predictions，function（prediction）{
 return prediction.description; 
））） ; 
}）; 
} 
< / script> 
  

我已在此发布完整代码： http://jsbin.com/ididas/1/edit

例如，当我输入

9 dinh tien hoang

第一个框，它会显示5个结果。但是，当我输入相同的查询到第二个盒子，它将只显示2个结果。

我的问题是为什么他们有这个不同，我该如何修复，自定义typeahead完美地作为内置的自动完成工作

解决方案

对我来说， service.getPlacePredictions（）也会返回5个结果。问题出现在 $。typeahead 中，因为当您搜索 9 dinh tien hoang 并且服务返回 9ĐinhTiênHoàng查询字符串与结果不匹配（例如，搜索 d 不会匹配<$ c

因为你不需要任何过滤 $。typeahead（）（因为autocompleteService已经返回过滤结果），您可以将其添加到$ .typeahead选项中：

  matcher：function（）{return true;} 
  

I'm using google maps APIv3 AutocompleteService to fetch data to a bootstrap's typeahead. However the result a little inaccurate comparing with the result return by using the built-in autocomplete of google.

My HTML code:

<label>Built-in</label><input type="text" id="address1" />
<label>Customize</label><input type="text" id="address2" />

My script:

<script>
    //this input use google built-in autocomplete
    var input1 = document.getElementById('address1');
    autocomplete = new google.maps.places.Autocomplete(input1);

    //this input use google AutocompleteService
    $('#address2').typeahead({
        source: process_keyword
    });

    var service = new google.maps.places.AutocompleteService();

    function process_keyword(query, process) {
        var place_results = [];
        var request = {
            input: query,
            types: ['geocode']
        };
        service.getPlacePredictions(request, function (predictions, status) {
            process($.map(predictions, function (prediction) {
                return prediction.description;
            }));
        });
    }
</script>

I've posted full code here: http://jsbin.com/ididas/1/edit

For example when I input

9 dinh tien hoang

to the first box, it will display 5 results. But when i input the same query to second box, it will display only 2 results.

My questions is why does they have this different and how can I repair so that my custom typeahead work perfectly as the built-in autocomplete

解决方案

For me the service.getPlacePredictions() also returns 5 results. The problem occurs in $.typeahead, because when you you search for 9 dinh tien hoang and the service returns 9 Đinh Tiên Hoàng the query-string does not match the result(e.g. a search for d will not match a Đ, it's a completely different character).

As you don't need any filtering at all for $.typeahead()( because the autocompleteService already returns filtered results) you may add this to the $.typeahead-options:

matcher:function(){return true;}

这篇关于谷歌地图自动完成和自动完成服务之间的不同结果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！