Kendo UI与ngmap autocomplete集成问题：事件未触发且组件不显示

我之前也碰到过类似的NgMap Autocomplete和Kendo UI集成的坑，结合你说的情况——输入框占位符正常、能拿到预测结果但组件不渲染、placeChanged事件没触发，大概率是初始化时机不对或者DOM/样式冲突导致的，给你几个具体的排查和解决步骤：

1. 确保Autocomplete在Kendo输入框初始化完成后再绑定 #

Kendo UI的输入组件会对原始DOM做一层包装，如果先初始化NgMap Autocomplete，绑定的元素可能被Kendo替换掉，导致后续事件和渲染都失效。

举个原生JS的例子：

// 先初始化Kendo TextBox
$("#locationInput").kendoTextBox({
  placeholder: "输入地点..."
});

// 找到Kendo包装后的真实input元素（Kendo会把input放在.k-textbox容器里）
const actualInput = $("#locationInput").find("input")[0];

// 再初始化谷歌地图Autocomplete
const autocomplete = new google.maps.places.Autocomplete(actualInput, {
  types: ['geocode'] // 根据你的需求配置类型
});

// 手动绑定place_changed事件
google.maps.event.addListener(autocomplete, 'place_changed', function() {
  const selectedPlace = this.getPlace();
  console.log("选中的地点：", selectedPlace);
  // 这里写你的业务逻辑
});

如果是Angular环境下的NgMap（比如angular-google-maps），一定要在ngAfterViewInit钩子中初始化，并且可以加个小延迟确保Kendo的DOM渲染完成：

import { Component, AfterViewInit, ViewChild, ElementRef } from '@angular/core';
import { } from '@types/googlemaps';

@Component({
  selector: 'app-location-picker',
  template: `<input #kendoInput kendoTextBox placeholder="输入地点...">`
})
export class LocationPickerComponent implements AfterViewInit {
  @ViewChild('kendoInput') kendoInput: ElementRef;
  private autocomplete: google.maps.places.Autocomplete;

  ngAfterViewInit(): void {
    // 加个100ms延迟，确保Kendo完成DOM包装
    setTimeout(() => {
      // 获取真实的input元素
      const targetInput = this.kendoInput.nativeElement.querySelector('input') || this.kendoInput.nativeElement;
      this.autocomplete = new google.maps.places.Autocomplete(targetInput);
      
      // 绑定place_changed事件
      this.autocomplete.addListener('place_changed', () => {
        const place = this.autocomplete.getPlace();
        // 处理选中的地点数据
      });
    }, 100);
  }
}

2. 修复样式冲突，避免下拉面板被遮挡 #

Kendo的组件默认可能有overflow: hidden或者较低的z-index，导致谷歌地图Autocomplete的下拉面板被隐藏或者压在下面。可以手动给Autocomplete的面板加样式：

/* 确保下拉面板不被遮挡 */
.pac-container {
  z-index: 9999 !important; /* 要高于Kendo组件的z-index（Kendo默认一般是1000左右） */
  position: fixed !important; /* 避免被父容器的overflow截断 */
}

3. 验证谷歌地图API是否正确加载了Places库 #

别漏掉在加载谷歌地图API的时候指定libraries=places，否则Autocomplete功能根本无法正常工作：

<script src="https://maps.googleapis.com/maps/api/js?key=你的API密钥&libraries=places"></script>

4. 检查事件绑定是否丢失 #

如果是用NgMap的指令式写法（比如[ngMapAutocomplete]），可能因为Kendo的DOM改造导致指令绑定失效，这种情况下建议用手动初始化的方式（就是上面例子里的new google.maps.places.Autocomplete()），更可靠。

按照这些步骤排查下来，应该能解决你遇到的组件不显示和事件不触发的问题。

内容的提问来源于stack exchange，提问作者Nazır Dogan