谷歌放置自动完成,如何清理pac容器？

Question

我正在使用谷歌地方自动完成控件,它创建了一个用于下拉类的元素pac-container.

我在ember应用程序中使用自动完成功能,当我完成它时,DOM元素自动完成必然会被删除,但pac-container元素仍然存在,甚至认为它是隐藏的.下次我实例化一个新的自动完成时,pac-container会创建一个新的并保留旧的.我似乎无法在API上找到类似于dispose方法的内容,那么有没有正确的方法呢？如果不是,我想我应该使用jquery来清理元素.

Answer 1

我遇到了同样的问题,希望谷歌最终提供一个正式的清理方法,但是现在我能够通过手动删除pac-container对象来解决问题,这个对象可以在返回的Autocomplete类中找到. :

var autocomplete = new google.maps.places.Autocomplete(element, options);

可以在以下位置找到对pac容器元素的引用:

autocomplete.gm_accessors_.place.Mc.gm_accessors_.input.Mc.L

我只是从我的widget析构函数中删除了DOM:

$(autocomplete.gm_accessors_.place.Mc.gm_accessors_.input.Mc.L).remove();

希望这可以帮助.

更新

我不确定Google的混淆是如何工作的,但上面的部分内容似乎是混淆的,如果API的混淆或内部结构发生变化,显然会失败.对后者无能为力,但对于前者,您至少可以按预期标准搜索对象属性.正如我们所看到的,一些属性名称没有被混淆,而一些属性名称似乎是,例如"Mc"和"L".为了使这更加健壮,我编写了以下代码:

var obj = autocomplete.gm_accessors_.place;
$.each(Object.keys(obj), function(i, key) {
  if(typeof(obj[key]) == "object" && obj[key].hasOwnProperty("gm_accessors_")) {
    obj = obj[key].gm_accessors_.input[key];
    return false;
  }
});
$.each(Object.keys(obj), function(i, key) {
  if($(obj[key]).hasClass("pac-container")) {
    obj = obj[key];
    return false;
  }
});
$(obj).remove();

代码期望一般结构保持不变,而不依赖于(可能)混淆的名称"Mc"和"L".丑陋我知道,但希望Google尽快解决这个问题.

Answer 2

我在没有jquery的情况下实现了上面的代码。

var autocomplete = new google.maps.places.Autocomplete(element, options);

export function getAutocompletePacContainer(autocomplete) {
 const place: Object = autocomplete.gm_accessors_.place;

 const placeKey = Object.keys(place).find((value) => (
    (typeof(place[value]) === 'object') && (place[value].hasOwnProperty('gm_accessors_'))
 ));

 const input = place[placeKey].gm_accessors_.input[placeKey];

 const inputKey = Object.keys(input).find((value) => (
   (input[value].classList && input[value].classList.contains('pac-container'))
 ));

 return input[inputKey];
}

getAutocompletePacContainer(autocomplete).remove()