如何在 ExtJS 中从 google.maps.places.autocomplete 创建自动完成

Question

如果我错了，请纠正我... 在编辑这篇文章之前，我编写了一个没有错误的代码。 但是在我阅读了有关如何创建最小、完整和可验证示例的评论之后。我很困惑，因为我之前的最小脚本不起作用，我不能包含完整的代码，因为我的代码很复杂，而且我没有可验证的示例。

我只需要知道如何从 google.maps.places 创建自动完成功能以在 EXTJS 中自动完成我的文本字段。

之前谢谢..

Answer 1

我已经从@Rob Schmuecker 的答案中解决了这个问题。 所以，这个问题的重点是关于使用适当的代理从谷歌调用 json，比如使用：

addressModel.getProxy().setExtraParam('url', 'http://maps.google.com/maps/api/geocode/json?address=' + queryString + '&sensor=false');

从这个数据模型中动态设置参数：

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']
});

之后，您可以创建一个组合框并将侦听器添加到组合框中的每个键，以调用代理中的外参数。

这是来自@Rob Schmuecker 的演示： https://fiddle.sencha.com/#fiddle/g70

这是 Rob 的完整答案，他解决了我的问题： Check This...

Answer 2

我想出了一种使用 Google Places-Library 解决此问题的方法。

我使用 Ext JS 3.4 的解决方案

1) 集成 Google Places API
2) 创建一个自定义代理（我已经扩展了 Ext.data.DataProxy）
2a) 设置代理 api (read: true)
2b) 覆盖 doRequest 方法。在那里您可以拨打电话，即 google.maps.PlacesService.textSearch
2c) 使用阅读器处理 Places 请求（我创建了自定义阅读器）
3) 将您的数据存储在商店中（我已经创建了自定义商店）
4) 创建使用存储中数据的组件

请注意，您的应用程序必须遵守 Google 地图/Google Earth API 服务条款！ （您必须出示徽标、第三方权利人等。）

你有它！