自定义位置非自定义控件Google地图（v3 API） [英] Custom Position Non Custom Control Google Maps (v3 API)

问题描述

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

I would like to be able to adjust the position of the map type control. I have it set to top right however I need to drop it by about 50 pixels. I read on custom controls you can pad the DIV, what about non custom controls? Can I extend the control?

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

Below is the HTML generated by the API for the control:

<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代码来更改此特定控件的填充：

As an interim solution I am using the following jquery code to alter the padding of this specific control:

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

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

Far from ideal, but does the job in this case :/

推荐答案

执行此操作的一种方法是使用 JQuery ，就像Mat.E在那里说的那样，而不是通过特定css风格，一种简单的方法是使用一个包含文本' Map '的子div gmnoprint （它是 MapTypeControl ，您正在寻找）
$ b

One way to do it would be with JQuery, like Mat.E said over there, but instead of searching the Control by specific css style, an easy way would be to search the element with a class gmnoprint which has a child div containing the text 'Map' (which is the MapTypeControl that you're looking for)

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

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