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

Question

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

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

之前谢谢..

Answer 1

我找到了使用 Google Places-Library 解决此问题的方法。

我使用 Ext JS 3.4 的解决方案

1) 整合 Google 个地方 API
2) 创建自定义代理（我已经扩展了 Ext.data.DataProxy）
2a) 设置代理 api (read: true)
2b) 覆盖 doRequest 方法。在那里你可以打电话给 google.maps.PlacesService.textSearch
2c) 使用 Reader 处理地点请求（我已经创建了我的自定义 reader）
3) 将您的数据存储在商店中（我已经创建了自定义商店）
4) 创建组件来使用存储中的数据

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

给你！

Answer 2

我已经从 @Rob Schmuecker 个回答中解决了这个问题。因此，这个问题的重点是使用适当的代理从 google 调用 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 的完整答案，他解决了我的问题：

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

how to create autocomplete from google.maps.places.autocomplete in ExtJS

javascript

extjs

autocomplete

google-maps-api-3