您如何设置 Google Places Autocomplete API 的下拉菜单样式？

Posted 2023-03-05

【中文标题】您如何设置 Google Places Autocomplete API 的下拉菜单样式？

【英文标题】：How do you style the dropdown on Google Places Autocomplete API?

【发布时间】：2011-12-15 04:24:39

【问题描述】：

在使用 Google Places/Maps Autocomplete API 时，我们需要调整显示自动完成地点建议的下拉菜单的样式。

有谁知道这是否可能？如果是这样，我想我们只需要知道 CSS 类名/ID。

我在这里指的是一个屏幕截图：

【问题讨论】：

必备开发工具：getfirebug.com 这将回答您关于文档内容的问题。

感谢您的回复。我们有 Firebug 并尝试查看 Autosuggest 脚本的响应，但看起来数据可能已编码？下面是一个例子行数据： “圣保罗 - 圣保罗，巴西”，空，[ “局部性”， “政治”， “地理编码”]， “CkQ2AAAAmYczUjki5Q7gIrfQPsUYANQF04pl_SDqNY5dGAmkVtZ-VaQHgEsa9LwrSlZ7udzS4tmF808EsRLH5VOYjWJyzxIQ3kMbArn71dQ9Ou2Ezv_GhBoU6LlzspE4kaKqWf_Dck-zde33x2I”， “fedb05012f42e79f038a58eac44e1bbc61b7c7aa”，[“圣保罗",0],["São Paulo",12],["Brazil",23]],[[0,2]]] 如您所见，我们可以使用其中没有漂亮干净的 html 来发现发生了什么开。

P.S.抱歉，无法弄清楚如何为上面的代码引用获取降价换行符。

【参考方案1】：

现在由 google 记录：https://developers.google.com/maps/documentation/javascript/places-autocomplete#style_autocomplete

【参考方案2】：

如果您使用 firebug（如对您的问题的评论中所述...），您会看到具有自动完成结果的容器是一个带有“pac-container”类的 DIV，并且建议在其中作为 DIV “pac-item”类。所以只需使用 CSS 样式即可。

【讨论】：

太好了，谢谢！我可以确认这些确实是下拉列表的类名，可用于设置下拉列表的样式。您还可以使用 min-width 更改地图自动完成下拉菜单的宽度。即最小宽度：250px;

我需要重新定位结果，我在自动完成的输入字段上进行了填充。这不会影响输入字段中文本的位置，但会影响自动完成结果的位置。

还有.pac-selected 上的.pac-item 当你向下箭头到一个结果时

非常感谢，当我阅读“pac-container”时，我明白了一切！！！再次感谢！

【参考方案3】：

此 CSS 将允许下拉菜单调整大小以适应结果的宽度：

.pac-container, .pac-item 
    width: inherit !important;

【讨论】：

简单易行。可能为我节省了一个小时的废话。谢谢@Brett。

完美，正是我想要的。

【参考方案4】：

检查元素非常困难，因为它一旦失去焦点就会关闭。

虽然我们知道容器有 .pac-container 类并且项目有 .pac-item，但在进一步研究 API 后，我发现它在文档中嵌入了 CSS 样式。

这是最初的内容，因此可以使用它来更改预定义的样式以满足您的需求。

.pac-container 
    background-color: #fff;
    position: absolute!important;
    z-index: 1000;
    border-radius: 2px;
    border-top: 1px solid #d9d9d9;
    font-family: Arial, sans-serif;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    overflow: hidden


.pac-logo:after 
    content: "";
    padding: 1px 1px 1px 0;
    height: 16px;
    text-align: right;
    display: block;
    background-image: url(https://maps.gstatic.com/mapfiles/api-3/images/powered-by-google-on-white3.png);
    background-position: right;
    background-repeat: no-repeat;
    background-size: 120px 14px

.hdpi.pac-logo:after 
    background-image: url(https://maps.gstatic.com/mapfiles/api-3/images/powered-by-google-on-white3_hdpi.png)

.pac-item 
    cursor: default;
    padding: 0 4px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    line-height: 30px;
    text-align: left;
    border-top: 1px solid #e6e6e6;
    font-size: 11px;
    color: #999

.pac-item:hover 
    background-color: #fafafa

.pac-item-selected,
.pac-item-selected:hover 
    background-color: #ebf2fe

.pac-matched 
    font-weight: 700

.pac-item-query 
    font-size: 13px;
    padding-right: 3px;
    color: #000

.pac-icon 
    width: 15px;
    height: 20px;
    margin-right: 7px;
    margin-top: 6px;
    display: inline-block;
    vertical-align: top;
    background-image: url(https://maps.gstatic.com/mapfiles/api-3/images/autocomplete-icons.png);
    background-size: 34px

.hdpi .pac-icon 
    background-image: url(https://maps.gstatic.com/mapfiles/api-3/images/autocomplete-icons_hdpi.png)

.pac-icon-search 
    background-position: -1px -1px

.pac-item-selected .pac-icon-search 
    background-position: -18px -1px

.pac-icon-marker 
    background-position: -1px -161px

.pac-item-selected .pac-icon-marker 
    background-position: -18px -161px

.pac-placeholder 
    color: gray

【讨论】：

提示：在 Chrome 中，在下拉菜单仍然打开时按 F8 暂停脚本，然后您就可以检查它了。

【参考方案5】：

如果有人对层次结构感兴趣，我可以使用Firebug 抓取以下内容：

<div class="pac-container pac-logo" style="width: 557px; position: absolute; left: 66px; top: 106px; display: none;">
    <div class="pac-item">
        <span class="pac-icon pac-icon-marker"></span>
        <span class="pac-item-query">
            <span>France</span>
        </span>
    </div>
<div>

【参考方案6】：

这对我有用，现在我可以在移动设备上运行它！

.pac-container 
    z-index: 10000 !important;
    width: auto !important;
    position: initial !important;
    left: 0 !important;
    right: 0 !important;
    display: block !important;

.pac-container:empty
    display: none !important;

还有这个地方！

$('selector').append('.pac-container');

现在结果将作为普通块元素显示在选定的 div 中:)

【讨论】：

但请注意，如果您在显示块外部单击，显示块将导致列表保持打开状态

【参考方案7】：

要强制该框保持打开状态，以便从开发工具中更轻松地进行样式设置和检查，您可以从 JS 控制台设置输入值，并且在从开发工具检查时容器将保持打开状态。

只需在页面的控制台中输入document.querySelector('.pac-target-input').value = 'CB'，然后返回“元素”选项卡，您现在就可以单独检查每个元素。

这解决了当焦点丢失时它总是关闭的问题。

【参考方案8】：

如果您想创建自定义 html 和 css，那么 AutocompleteService 类也可用，它将提供 json 中的所有数据。

const service = new google.maps.places.AutocompleteService();
service.getQueryPredictions(
     input: "provide location string here for search" ,
    (suggestions) => console.log(suggestions)
);