自定义谷歌地图 v3 控制位置问题

Custom Google Map v3 Controls Position Issue

本文关键字：位置 问题 控制 v3 谷歌地图 自定义      更新时间：2023-09-26

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

根据 API 文档：

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

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

首次加载控件时，它们彼此重叠，而不是适合以匹配其各自的索引值。

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

这是我试图解决问题的方法：

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

再次感谢！

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

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

相关文章：