自定义 Google Map v3 控件位置问题答案

【问题标题】：Custom Google Map v3 Controls Position Issue自定义 Google Map v3 控件位置问题
【发布时间】：2013-09-04 13:38:46
【问题描述】：

我为地图应用程序创建的三个自定义控件存在问题。

根据 API 文档：

API 按索引属性的顺序将控件放置在每个位置；具有较低索引的控件首先放置。例如，位置 BOTTOM_RIGHT 的两个自定义控件将根据此索引顺序布局，较低的索引值优先。默认情况下，所有自定义控件都放置在放置任何 API 默认控件之后。您可以通过将控件的 index 属性设置为负值来覆盖此行为。自定义控件不能放置在徽标的左侧或版权的右侧。

因此，我将三个控件添加到同一个位置，为每个控件赋予一个索引值，并期望它们相应地适合。

当控件第一次加载时，它们彼此重叠，而不是匹配它们各自的索引值。

但是，当我执行诸如悬停在另一个默认控件（例如缩放控件）上的操作时，自定义控件会正确显示。

这是我尝试解决的问题：

在 CSS 中设置控件的位置（不起作用，因为控件位置只能在包装控件时自定义）
延迟添加每个控制按钮的时间
尝试触发其他控件的鼠标悬停动作，因为这会手动将控件显示在正确的位置

任何帮助或见解表示赞赏。我知道我提到包装控件允许自定义位置（根据here），但有没有其他方法可以让我不这样做？

抱歉，我尝试上传截图，但显然我不够受欢迎。这是JsFiddle。

JsFiddle 仅在用户选择特定输入时显示我如何添加这些控件：

$('#toggle').on('click', function(){
    if ($(this).is(':checked')){
        $(pointSelDiv).css('display', 'block');
        $(polySelDiv).css('display', 'block');
        $(circSelDiv).css('display', 'block');   
    }else{
        $(pointSelDiv).css('display', 'none');
        $(polySelDiv).css('display', 'none');
        $(circSelDiv).css('display', 'none');   
    }
});

再次感谢！

【问题讨论】：

而不是截图，提供jsfiddle以便我们可以重现此问题并帮助您调试
苏维，谢谢你的建议。我创建了一个快速的 JsFiddle 来显示问题（请参阅原始帖子进行编辑）。请注意，当您打开控件时，它们是如何重叠在一起的。

标签： javascript html css google-maps-api-3 custom-controls

【解决方案1】：

发生这种情况是因为 Google Maps API 需要知道您的控制元素的 width 和 height 才能知道将它们放置在哪里 - 何时呈现地图。通过最初将它们设置为display: none，您也将其隐藏在页面的实际布局中 - 就好像该元素不存在一样。请改用visibility: hidden - 将visibility 设置为hidden 仍将隐藏屏幕上的元素，但它仍存在于布局中。供参考：http://www.w3schools.com/css/css_display_visibility.asp

另外，我建议不要将这些 CSS 属性单独设置到您的自定义控件元素，而是向这些元素添加一个类（您可以通过 jquery 的.addClass() 执行此操作）并仅通过定位该类来切换。我已经更新了你的 jsfiddle here。

【讨论】：