谷歌地点自动完成未显示

Question

组件

import Ember from 'ember';

export default Ember.TextField.extend({
type: 'text',

didInsertElement: function() {
  this.$().addClass("form-control");
  var autocomplete = new google.maps.places.Autocomplete(
    (document.getElementById('autocomplete')),{types:['geocode']} //trying without jQuery, but still.
  );
}});

模板

{{gp-textfield id="autocomplete"}}

渲染成

<input id="autocomplete" type="text" class="ember-view ember-text-field form-control" placeholder="Enter a location" autocomplete="off">

但是，我仍然得到：

InvalidValueError: not an instance of HTMLInputElement

任何帮助都将不胜感激。

编辑：Ember 2.6

清理了一些代码，但没有效果。

didInsertElement: function() {
  this.$().addClass("form-control");
  var element = document.getElementById('autocomplete');
  var autocomplete = new google.maps.places.Autocomplete(element);
}

- Rentonie

---

这并不是解决您问题的方法，但您可以使用类属性"classNames"来为组件指定类名。它会将它们连接到父类的类名以及模板中由“class”属性指定的任何类中。 - akst

这也可能与问题有关，但是我建议不要覆盖didInsertElement，而是定义一个新方法，但像Ember.on('didElementInsert', <your function>)这样定义它，它仍然会在插入时运行，但不会覆盖父类中的didInsertElement方法，或者你可以在函数开头调用this._super(arguments)，但我觉得前者更整洁。 - akst

有关覆盖 didInsertElement 的更多信息，请参见链接。有关 Ember.on 的更多信息，请参见链接。 - akst

关于你的实际问题，考虑使用this.get('element')来获取组件的DOM元素，而不是全局ID（如果你想使用多个typeahead），并且根据Google文档中的示例，我认为你需要将typeahead绑定到地图上，还有其他一些事情（尽管也许你在代码的其他地方已经这样做了）。 - akst

Answer 1

使用Chrome中的网络选项卡。

显然，我的API密钥未被授权使用此功能，我必须启用它。

- Rentonie