自定义位置非自定义控件谷歌地图（v3 API）

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 样式搜索控件，一种简单的方法是使用gmnoprint 类有一个包含文本“Map”的子 div（这是您要查找的 MapTypeControl）

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

Answer 2

我们破解了这个。在 jQuery 的帮助下，我们在第一次创建地图时根据自定义样式元素使用类或 id 标记元素。这允许我们执行 ('.z​​oom_controls').css('top', '50px') 之类的操作来向下移动缩放控件。

这是一个随时可能破坏的 hack，但它适用于 v3.4 版本。当它成为一个问题时，我们会重新审视。我不知道为什么 Google 不把 ID 放在那里。

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

Answer 3

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

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

Answer 4

您只能使用 CSS 来实现。仅填充顶部示例：

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

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