javascript - 自定义 Google Map v3 控件位置问题

Question

我为 map 应用程序创建的三个自定义控件出现问题。

根据 API 文档:

The API places controls at each position by the order of an index property; controls with a lower index are placed first. For example, two custom controls at position BOTTOM_RIGHT will be laid out according to this index order, with lower index values taking precedence. By default, all custom controls are placed after placing any API default controls. You can override this behavior by setting a control's index property to be a negative value. Custom controls cannot be placed to the left of the logo or to the right of the copyrights.

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

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

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

以下是我尝试解决的问题:

• 在 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');   
    }
});

再次感谢!

Answer 1

发生这种情况是因为 Google Maps API 需要知道控制元素的宽度和高度，以便在呈现 map 时知道将它们放置在何处。通过最初将它们设置为 display: none，您也在页面的实际布局中隐藏了它 - 就好像该元素不存在一样。使用 visibility: hidden 代替 - 将 visibility 设置为 hidden 仍然会隐藏屏幕上的元素，但它仍然存在于布局中。供引用:http://www.w3schools.com/css/css_display_visibility.asp

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