1

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

根据 API 文档：

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

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

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

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

这是我试图解决的问题：

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

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

抱歉，我尝试上传截图，但显然我不够受欢迎。这是一个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');   
    }
});

再次感谢！

4

1 回答 1

4

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

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

于 2013-09-04T17:35:47.710 回答