Google地址自动补全.pac-icon移动端显示随机图标求助

桌面端Google地址自动补全的.pac-icon显示正常，但切换到移动端分辨率时，会出现大量随机图标。以下是自定义下拉框的CSS代码：

.pac-container {
    border-radius: 15px;
    margin-top: 5px;
}
.pac-container:after{
    content:none !important;
}
.pac-item,
.pac-item-query {
    font-size: 1em;
    font-family: 'Nunito Sans', sans-serif;
}
.pac-item-query {
    color: #2D728F;
}
.pac-item {
    padding: 15px;
    border: 0;
    display: flex;
    align-items: center;
}

.pac-icon {
    background-image: url("/assets/media/images/icons/location.png");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    width: 35px;
    height: 35px;
}
.pac-item:hover > .pac-icon {
    background-image: url("/assets/media/images/icons/location-orange.png");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

排查与解决方法 #

• 覆盖所有地址类型的图标子类：Google地图自动补全在移动端会根据地址类型（如住宅、商家、地标等）为图标添加不同的子类（例如.pac-icon-marker、.pac-icon-home、.pac-icon-business），这些子类自带默认背景图，现有CSS只覆盖了基础.pac-icon类，导致移动端显示随机默认图标。修改CSS，确保覆盖所有相关子类：

/* 统一覆盖所有pac-icon类 */
.pac-icon, .pac-icon-marker, .pac-icon-home, .pac-icon-business, .pac-icon-location {
    background-image: url("/assets/media/images/icons/location.png") !important;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    width: 35px;
    height: 35px;
    /* 清除Google默认的字体图标样式 */
    font-family: inherit !important;
    text-indent: 0 !important;
    border: none !important;
}

.pac-item:hover > .pac-icon,
.pac-item:hover > .pac-icon-marker,
.pac-item:hover > .pac-icon-home,
.pac-item:hover > .pac-icon-business,
.pac-item:hover > .pac-icon-location {
    background-image: url("/assets/media/images/icons/location-orange.png") !important;
}

• 检查移动端媒体查询冲突：打开浏览器开发者工具（F12）切换到移动端视图，查看.pac-icon的最终生效样式，确认是否有项目内的移动端媒体查询规则，意外覆盖了自定义背景图或尺寸属性。
• 强制清除内联样式：如果Google为移动端图标添加了内联样式，可通过!important关键字强制覆盖自定义样式，或在初始化Autocomplete组件时，通过配置项禁用默认样式。

内容的提问来源于stack exchange，提问作者O'Niel