Question

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

根据API文档：

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

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

首次加载控件时，它们位于彼此的顶部，而不是匹配它们各自的索引值。

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

以下是我尝试解决问题的方法：

在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需要知道控件元素的width和height才能知道在何处定位它们 - 渲染地图时。通过最初将它们设置为display: none，您将其隐藏在页面的实际布局中 - 就好像元素不存在一样。请改用visibility: hidden - 将visibility设置为hidden仍然会隐藏屏幕上的元素，但它仍然存在于布局中。供参考：http://www.w3schools.com/css/css_display_visibility.asp

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

自定义Google Map v3控制位置问题

1 个答案: