使用带有 select2 的谷歌地图自动完成 api

Posted 2023-05-07

【中文标题】使用带有 select2 的谷歌地图自动完成 api

【英文标题】：Use google maps autocomplete api with select2

【发布时间】：2018-08-15 19:27:02

【问题描述】：

我有一个关于使用 select2 实现 Google 地图自动完成功能的问题。我在控制台“Uncaught SyntaxError: Unexpected token :”中收到此错误。

$(document).ready(function() 
    $(".adress-autocomplete").select2(
        ajax: 
            url: "https://maps.googleapis.com/maps/api/place/autocomplete/json",
            type: "GET",
            dataType: 'jsonp',
            delay: 250,
            data: function (params) 
                return 
                    input: params.term, // search term
                    key: "MyKey"
                ;
            ,
            processResults: function (data, params) 
                params.page = params.page || 1;

                return 
                    results: data["predictions"],
                    pagination: 
                        more: (params.page * 2) < data.total_count
                    
                ;
            ,
            cache: true
        ,
        placeholder: 'Search Adress',
        escapeMarkup: function (markup)  return markup; , 
        minimumInputLength: 2,
        templateResult: formatRepo,
        templateSelection: formatRepoSelection
    );

    function formatRepo (repo) 
        if (repo.loading) 
            return repo.text;
        

        var markup = "<div class='select2-result-repository clearfix'>" +
            "<div class='select2-result-title'>" + repo.description + "</div>";


        return markup;
    

    function formatRepoSelection (repo) 
        return repo.description;
    
);

Json 结果： https://jsonblob.com/1c69e57a-2220-11e8-b7b9-b3cbb530e512

【问题讨论】：

你解决了吗？

【参考方案1】：

Google 不喜欢对其 API 的 ajax 请求，最好覆盖 Select2 dataAdapter 并使用 Google 函数调用自动完成 API。

$.fn.select2.amd.define('select2/data/googleAutocompleteAdapter', ['select2/data/array', 'select2/utils'],
    function (ArrayAdapter, Utils) 
        function GoogleAutocompleteDataAdapter ($element, options) 
            GoogleAutocompleteDataAdapter.__super__.constructor.call(this, $element, options);
        

        Utils.Extend(GoogleAutocompleteDataAdapter, ArrayAdapter);

        GoogleAutocompleteDataAdapter.prototype.query = function (params, callback) 
            var returnSuggestions = function(predictions, status)
            
                var data = results: [];
                if (status != google.maps.places.PlacesServiceStatus.OK) 
                    callback(data);
                
                for(var i = 0; i< predictions.length; i++)
                
                    data.results.push(id:predictions[i].place_id, text: predictions[i].description);
                
                data.results.push(id:' ', text: 'Powered by Google', disabled: true);
                callback(data);
            ;

            if(params.term && params.term != '')
            
                var service = new google.maps.places.AutocompleteService();
                service.getPlacePredictions( input: params.term , returnSuggestions);
            
            else
            
                var data = results: [];
                data.results.push(id:' ', text: 'Powered by Google', disabled: true);
                callback(data);
            
        ;
        return GoogleAutocompleteDataAdapter;
    
);
function formatRepo (repo) 
    if (repo.loading) 
        return repo.text;
    
    var markup = "<div class='select2-result-repository clearfix'>" +
        "<div class='select2-result-title'>" + repo.text + "</div>";
    return markup;


function formatRepoSelection (repo) 
    return repo.text;


var googleAutocompleteAdapter = $.fn.select2.amd.require('select2/data/googleAutocompleteAdapter');

$('.adress-autocomplete').select2(
    width: '100%',
    dataAdapter: googleAutocompleteAdapter,
    placeholder: 'Search Adress',
    escapeMarkup: function (markup)  return markup; , 
    minimumInputLength: 2,
    templateResult: formatRepo,
    templateSelection: formatRepoSelection
);

https://jsfiddle.net/angelmarde/perqpp9f/2/

看起来您正在尝试按地址过滤，那么您可以更改此行：

service.getPlacePredictions( input: params.term , returnSuggestions);

添加类型

service.getPlacePredictions( input: params.term, types: ['address'] , returnSuggestions);

您可以在此处查看类型：https://developers.google.com/places/web-service/autocomplete#place_types