Bootstrap模态框高德地图自动输入(Autocomplete)失效解决方法

Bootstrap模态框高德地图自动输入(Autocomplete)失效解决方法

问题描述

在Bootstrap的模态框中使用高德地图时发现Autocomplete组件失效，开始以为真的是失效了，后面发现并非失效，而只是被模态框给覆盖了。

解决方法

修改Autocomplete的css属性z-index为大于或等于1050即可。

.amap-sug-result { z-index: 1050; }

解决过程

开始以为是Autocomplete组件失效的原因，因此针对Autocomplete组件做了许多测试，也查阅了官方提供的一些文档，但是并没有找到我想要的，最后在控制台打印了绑定了Autocomplete的属性信息，发现能够打印出来，所以Autocomplete并没有失效。

    var auto = new AMap.Autocomplete({
        input: "tipinput"
    });
    console.log(auto);

所以从另一个角度“模态框”去分析问题，发现去除模态框后，地图的Autocomplete组件使用正常，这时候断定问题出在了模态框上面，经过许多测试，最终在将地图高度调小之后发现了问题所在，并不是Autocomplete失效，而是由于模态框的z-index属性比Autocomplete组件的z-index大，所以导致了Autocomplete组件被模态框给覆盖了。

通过浏览器的调试工具发现模态框的z-index属性为1050，并且找到控制Autocomplete组件CSS样式的class名，发现Autocomplete组件的z-index属性为1024，所以只需要修改其z-index属性的大小为1050或以上即可解决问题。

所以只需要修改下Autocomplete的CSS属性即可解决该问题。

.amap-sug-result { z-index: 1050; }

本文到这里也就结束了，希望能够对有需要的人带来帮助，同时感谢大家的观看，如若文中存在问题也欢迎大家踊跃指出，谢谢大家！