Question

我希望能够调整地图类型控件的位置。我把它设置在右上方但是我需要将其降低大约50个像素。我读了你可以填充DIV的自定义控件，那么非自定义控件呢？我可以扩展控制吗？

以下是API为控件生成的HTML：

<div class="gmnoprint" style="margin: 5px; z-index: 11; position: absolute; cursor: pointer; text-align: left; top: 0px; right: 0px;">
<div style="width: 80px; position: relative; overflow: hidden; border: 1px solid black;">
    <div style="color: black; font-family: Arial,sans-serif; -moz-user-select: none; font-size: 12px; background-color: white; padding: 0px 5px; font-weight: bold; border-width: 1px; border-style: solid; border-color: rgb(112, 112, 112) rgb(208, 208, 208) rgb(208, 208, 208) rgb(112, 112, 112);" title="Change map style">Map<img style="position: absolute; right: 4px; top: 4px; display: block;" src="http://maps.gstatic.com/intl/en_us/mapfiles/down-arrow.gif"></div>
</div>
<div style="border: 1px solid black; width: 80px; display: none;">
    <div style="color: black; font-family: Arial,sans-serif; -moz-user-select: none; font-size: 12px; background-color: white; padding: 1px 5px;" title="Show street map">Map</div>
    <div style="color: black; font-family: Arial,sans-serif; -moz-user-select: none; font-size: 12px; background-color: white; padding: 1px 5px;" title="Show satellite imagery">Satellite</div>
    <div style="color: black; font-family: Arial,sans-serif; -moz-user-select: none; font-size: 12px; background-color: white; padding: 1px 5px;" title="Show imagery with street names">Hybrid</div>
    <div style="color: black; font-family: Arial,sans-serif; -moz-user-select: none; font-size: 12px; background-color: white; padding: 1px 5px;" title="Show street map with terrain">Terrain</div>
</div></div>

作为临时解决方案，我使用以下jquery代码来更改此特定控件的填充：

$('[title="Change map style"]').parent().css('padding-top', '36px');

远非理想，但在这种情况下完成工作：/

Answer 1

一种方法是使用 JQuery ，就像Mat.E在那里说的那样，但不是通过特定的css样式搜索Control，一种简单的方法是用一个搜索元素class gmnoprint ，其子div包含文本' Map '（您正在寻找的 MapTypeControl ）

$('.gmnoprint>div>div:contains("Map")').parent().parent().css('margin-left','35px');

Answer 2

似乎你应该能够使用一些CSS（也许是一些JS）来移动它。我访问了http://maps.google.com，看起来这些控件都有一个ID（在我的情况下是'lmc3d'）并且绝对定位。您是否在样式表中尝试过类似的内容：

#lmc3d{
    top: 50px;   /* adjust these two to move */
    left: 50px;
}

Answer 3

我们攻击了这个。在jQuery的帮助下，我们在首次创建地图时根据其自定义样式元素标记具有类或id的元素。这允许我们执行诸如（'.zoom_controls'）。css（'top'，'50px'）之类的操作来向下移动缩放控件。

这是一个可以在任何时候破解的黑客，但它在v3.4适用于我们。当它成为问题时我们会重新审视。我不知道谷歌为什么不把ID放在那里。

课程：https://gist.github.com/887917
ID：https://gist.github.com/887918

Answer 4

您只能使用CSS。 Padding top only example：

#your_map_id_container .gm-style .gmnoprint{
  margin-top: 100px! important;
}

#your_map_id_container .gm-style .gmnoprint .gmnoprint{
  margin-top: 0px !important;
}

自定义排名非自定义控制Google地图（v3 API）

4 个答案: