Google Maps API V3自定义控件位置

Question

我读过有关地图(上定位控制文档TOP,TOP_LEFT等等),但有什么办法,使自定义位置？例如:left: 20px; top: 200px; 我只想在top_left角落里将我的徽标和缩放控件放在徽标下方.以及如何在导航控件中删除声像控件？我希望只有默认样式的缩放控件(未最小化).谢谢.

Answer 1

虽然这个问题相当陈旧,但看起来差不多有3k,但它似乎仍然引起了人们的兴趣 - 所以,这是我的解决方案:

包裹控件!

首先,我们必须找到容器元素,谷歌放置控件.这取决于我们想要在地图上使用哪些控件.Google不会对这些容器使用唯一的ID.但是所有的控件都有"gmnoprint"类的共同点.因此,只需使用"gmnoprint"计算元素即可.假设我们只想使用"ZoomControlStyle.SMALL"控件.它始终是"gmnoprint"的最后一个元素.

现在,我们可以简单地设计元素样式 - 对吧？不会.一旦缩放或调整地图大小,Google就会重置控件的样式.运气不好,但是:我们可以在控件周围包装一个容器并设置这个容器的样式!

使用jQuery,这是一个非常简单的任务:

$('div.gmnoprint').last().parent().wrap('<div id="newPos" />');

我们只需要确保控件在我们尝试包装时完全加载.我想这不是完全防弹,但使用MapsEventListener"tilesloaded"做得非常好:

google.maps.event.addDomListener(map, 'tilesloaded', function(){
    // We only want to wrap once!
    if($('#newPos').length==0){
        $('div.gmnoprint').last().parent().wrap('<div id="newPos" />');
    }
});

查看http://jsfiddle.net/jfPZH/(不工作,请参阅2016年2月更新)

当然,如果您不喜欢最初的闪烁并想要更可靠的版本,您可以进行各种改进,如fadeIn等:http://jsfiddle.net/vVLWg/(不工作,请参阅2016年2月更新)

所以,我希望你们中的一些人会觉得这很有用 - 玩得开心!

更新:使用此方法,您还可以定位任何其他控件(例如绘图库的控件).你只需要确保选择合适的容器!这是一个修改过的例子:http://jsfiddle.net/jP65p/1/(不知何故还在工作)

更新:截至2016年2月,谷歌似乎已经改变了地图控件的定位.这不会破坏我的解决方案.它只需要一些调整.所以这里有更新的小提琴:

简单:http://jsfiddle.net/hbnrqqoz/
花式:http://jsfiddle.net/2Luk68w5/

Answer 2

您可以为徽标创建自定义控件,并将其添加到地图中以进行定位.您不能直接在常量之外设置控件的位置,但可以使用控件div上的填充来偏移位置.

http://code.google.com/apis/maps/documentation/javascript/controls.html

Answer 3

它非常简单,只需将其添加到您的css文件中即可!

div.gmnoprint { padding-top: 50px; }

它将控制50px向下移动,没有黑客或任何东西!