Google Maps API v3：可以使用ExtJS 4.2在组合框中创建地点自动填充吗？ [英] Google Maps API v3: Can I create Place Autocomplete in combobox using ExtJS 4.2?

问题描述

我在google上搜索了这个，但没有运气找到解决方案。我已阅读此文档，但它只是使用纯JavaScript。

I have search this over on google, but no luck finding the solution. I have read this documentation but it just using pure javascript.

我已阅读此由@Ram创建的旧帖子，但答案没有解决我的问题，因为我认为也许有其他的想法更棘手的方式，我现在从目前的知识不达到。

I have read this from older post created by @Ram, but the answer didn't solve my problem, because I think maybe there's other ideas more tricky way that I don't reach it now from my current knowledge.

我已经尝试使用php中的ajax来检索预测并抛弃该限制，这是我在c_places.php中的PHP代码：

I have tried using ajax from php to retrieve predictions and to throw away that limitation, this's my php code in c_places.php :

function getPlaces(){
        $address = urlencode($this->input->post('place'));
        $request = file_get_contents("http://maps.google.com/maps/api/geocode/json?address=" . $address . "&sensor=false");
        // $json = json_decode($request, true);
        echo $request;
    }

这是我的ajax电话：

this's my ajax call :

Ext.Ajax.request({
    url: 'c_places/getPlaces',
    params: {
        "place" : someplace
    },
    success: function(response, opts) {
        var obj = Ext.decode(response.responseText);
        console.dir(obj);
    },
    failure: function(response, opts) {
        console.info('server-side failure with status code ' + response.status);
    }
});

ajax从googleapis返回一个json obj，但我不知道如何把这个json combobox的data.store，因为这个来自用户在打字时动态地调用位置。所以如果我将Ext.data.store放在combobox之前的一开始，组合框只显示原始存储，而不是从用户输入位置。但是，在尝试此网址之前： http://maps.google.com/maps/api/geocode/json?address=address& sensor = false

the ajax return a json obj from googleapis, but i don't know how to put this json to the data.store of combobox, Because this call dynamically from user when typing location. So if I put the Ext.data.store in the beginning before combobox, the combobox only show the original store, not from user when typing location. But, before you try this url : http://maps.google.com/maps/api/geocode/json?address="address"&sensor=false

有时这个url给我一个json输出，但有时给我错误服务器找不到。我不知道为什么，直到我发布这个url显示我的错误，但这不是一个问题，因为我有另一个诀窍得到json。

sometimes this url give me a json output, but sometimes give me error "Server not found". I don't know why, until i post this the url show me the error, but this's not a problem, because i've another trick to get the json.

我的问题是：
1.有没有办法从combobox动态加载json存储它自己使用keyup监听器来调用我的ajax？我的意思是，没有使用其他组合框触发另一个组合框的负载。
2.有没有办法使用ExtJS 4.2创建这个地方自动填充？或其他想法来解决这个问题？

My problem is : 1. Is there a way to load json store dynamically from combobox it self using keyup listener to call my ajax ? i mean, not using other combobox to trigger load from another combobox. 2. Is there a way to create this place autocomplete in using ExtJS 4.2? or Other ideas to solve this?

任何帮助都非常感谢！

请更正我，如果我的问题没有关注问题，或者我的问题太广泛或不清楚的问题陈述。我很乐意编辑我的帖子来提供更多的细节。

Please correct me, if my question didn't focus the problem or my question is too broad or unclear problem statement. I'll gladly edit my post to give more detail.

推荐答案

好的，看看下面的代码，这里只是使用本地固定数据源，但在您的示例中，您将使用适当的代理将其指向您的 c_places.php 。因为在这个例子中，数据源是固定的，它总是返回相同的数据，但在你的实例中，你必须检查输入的值。

Ok have a look at this code below, here were are just using a local fixed data source but in your example you would point this at your c_places.php with an appropriate proxy. Since in the example there data source is fixed it is always returning the same data but in your instance you'd have to check for the typed value.

Ext.application({
    name: 'Fiddle',

    launch: function() {
        addressModel = Ext.define("Addresses", {
            extend: 'Ext.data.Model',
            proxy: {
                type: 'jsonp',
                url: 'https://jsonp.nodejitsu.com',
                reader: {
                    type: 'json',
                    root: 'results',
                    totalProperty: 'totalCount'
                }
            },

            fields: ['formatted_address']
        });

        var ds = Ext.create('Ext.data.Store', {
            model: 'Addresses'
        });


        var panel = Ext.create('Ext.panel.Panel', {
            renderTo: Ext.getBody(),
            title: 'Search the Addresses',
            width: 600,
            bodyPadding: 10,
            layout: 'anchor',

            items: [{
                xtype: 'combo',
                store: ds,
                displayField: 'title',
                typeAhead: false,
                hideLabel: true,
                hideTrigger: true,
                anchor: '100%',
                enableKeyEvents: true,

                listConfig: {
                    loadingText: 'Searching...',
                    emptyText: 'No matching posts found.',

                    // Custom rendering template for each item
                    getInnerTpl: function() {
                        return '<div class="search-item">{formatted_address}</div>';
                    }
                },

                // override default onSelect to do redirect
                listeners: {
                    select: function(combo, selection) {
                        var address = selection[0];
                        if (address) {
                            alert('you picked ' + address.data.formatted_address);
                        }
                    },
                    keyup: function(combo) {
                        queryString = combo.getValue();
                        console.log(queryString);
                        console.log(addressModel);
                        addressModel.getProxy().setExtraParam('url', 'http://maps.google.com/maps/api/geocode/json?address=' + queryString + '&sensor=false');
                    }
                }
            }, {
                xtype: 'component',
                style: 'margin-top:10px',
                html: 'Live search requires a minimum of 4 characters.'
            }]
        });
    }
});

演示： https://fiddle.sencha.com/#fiddle/g70

这篇关于Google Maps API v3：可以使用ExtJS 4.2在组合框中创建地点自动填充吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！