如何为Google Maps Places自动补全结果强制开启深色模式？

问题描述 #

使用Google Maps JS Places库实现城市自动补全时，即便浏览器和系统处于深色模式，补全结果下拉框仍默认显示浅色样式，官方文档未提及相关配置选项，如何强制开启深色模式？

现有代码 #

var options = {
    types: ['(regions)'],
    componentRestrictions: {country: ["us", "ca"]}
};
var input = document.getElementById('city');
var autocomplete = new google.maps.places.Autocomplete(input, options);            

当前效果 #

解决方案 #

Google Places Autocomplete本身没有直接的深色模式配置参数，但可以通过以下两种方式实现：

方法1：利用官方地图样式ID（推荐）

Autocomplete会继承Google Maps的主题样式，你可以通过创建深色主题的地图ID来同步样式：

1. 登录Google Cloud控制台，进入地图样式页面，创建一个深色主题的自定义样式，生成对应的mapId。
2. 在Autocomplete初始化选项中添加mapId参数：

var options = {
    types: ['(regions)'],
    componentRestrictions: {country: ["us", "ca"]},
    mapId: 'YOUR_DARK_THEME_MAP_ID' // 替换为你生成的深色主题mapId
};
var input = document.getElementById('city');
var autocomplete = new google.maps.places.Autocomplete(input, options);

方法2：自定义CSS覆盖样式

直接通过CSS修改Autocomplete下拉框的样式（注意：Google可能会更新DOM类名，需定期验证）：

/* 下拉容器深色背景 */
.pac-container {
    background-color: #1f1f1f !important;
    border: 1px solid #333 !important;
}

/* 选项文本颜色 */
.pac-item {
    color: #ffffff !important;
}

/* 选项悬停/选中状态 */
.pac-item:hover, .pac-item-selected {
    background-color: #333 !important;
}

/* 匹配关键词高亮 */
.pac-item-query {
    color: #64b5f6 !important;
}

内容的提问来源于stack exchange，提问作者Eric