自定义Google地图v3控件位置问题 [英] Custom Google Map v3 Controls Position Issue

问题描述

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

I'm having an issue with three custom controls I have created for a map application.

根据API文档：

API通过索引属性的顺序在每个位置放置控件;首先放置具有较低索引的控件。例如，将根据此索引顺序布置位置BOTTOM_RIGHT处的两个自定义控件，其中较低的索引值优先。默认情况下，所有自定义控件放置在任何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.

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

Therefore, I added the three controls to the same position, giving each an index value, and expected them to fit accordingly.

当首次加载控件时，它们是一个在另一个之上，

When the controls are first loaded, they are on top of one another, instead of fitting to match their respective index values.

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

However, when I perform an action such as hovering over another default control (such as the zoom control), the custom controls appear correctly.

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

Here is what I have tried to fix the problem:

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

• Setting the position of the controls in CSS (does not work since control positioning can only be custom if you wrap the controls)
• Delaying the time for each control button to be added
• Tried triggering mouseover actions of other controls since this manually shows the controls in the correct position

赞赏。我知道我提到包装控件允许自定义位置（根据此处），但是有没有其他方法我可以让这个工作，而不这样做？

Any help or insight in appreciated. I know I mentioned wrapping the controls allows for custom position (according to here), but is there any other way I can get this to work without doing so?

我的道歉，我试图上传截图，但显然我不够流行。这是一个 JsFiddle 。

My apologies, I tried uploading screenshots but apparently I am not popular enough. Here is a JsFiddle.

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

The JsFiddle shows how I am adding these controls only when the user has selected a specific input:

$('#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 改为 - 将可见性设置为隐藏仍然会将元素隐藏在屏幕上，但它仍然存在于布局中。供参考： http://www.w3schools.com/css/css_display_visibility.asp

This is happening because Google Maps API needs to know the width and the height of your control elements to know where to position them - when the map is rendered. By initially setting them to display: none, you are hiding it from the actual layout of your page as well - it's as if the element's not there. Use visibility: hidden instead - setting the visibility to hidden will still hide the element on the screen, but it is still present in the layout. For reference: http://www.w3schools.com/css/css_display_visibility.asp

此外，我建议而不是单独设置这些CSS属性到您的自定义控件元素，添加一个类（你可以通过jquery的 .addClass ））到这些元素，并仅通过定位类来切换。我已更新您的jsfiddle 这里。

Also, I suggest rather than individually setting these CSS attributes to your custom control elements, add a class (you can do this via jquery's .addClass()) to these elements and toggle just by targeting the class. I've updated your jsfiddle here.

这篇关于自定义Google地图v3控件位置问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！