Google Maps API V3自定义控件的位置 [英] Google Maps API V3 custom controls position

问题描述

我已阅读关于在地图上定位控件的文档（ TOP ， TOP_LEFT 等），但是有什么办法可以让自定义位置？例如： left：20px; top：200px ;
我只想在top_left角落放置我的徽标，并在徽标下方放大控制。
以及如何删除导航控件中的平移控制？我想只有默认样式（不是最小化）的缩放控制。
谢谢。

解决方案

虽然这个问题相当古老，有近3k的观点，所以，这里是我的解决方案：

包装控件！

首先，我们必须找到容器元素，Google在这里控制。这取决于我们想要在地图上使用哪些控件。 Google不会为这些容器使用唯一的ID。但是所有的控件都有gmimoprint类。所以只需要用gmnoprint来计算要素即可完成工作。假设我们只想使用ZoomControlStyle.SMALL控件。它始终是gmnoprint的最后一个元素。

现在，我们可以简单地设置元素的样式 - 对吗？不，只要您缩放或调整地图大小，Google会重置控件的样式。运气不好，但是：我们可以在容器周围包装一个容器并设置这个容器的样式！

使用jQuery，这是一个非常简单的任务：

$（'div.gmnoprint'）。last（）。parent（）。wrap（'< div id = newPos/>'）;


我们只需确定，当我们试图包装它时，控件就会完全加载。这并不完全符合我的想法，但使用MapsEventListenertilesloaded做得非常好：
$ b

google.maps.event.addDomListener（map，'tilesloaded'，function（）{
//我们只想打包一次！
if（$（'＃newPos'）。length == 0 ）{
$（'div.gmnoprint'）。last（）。parent（）。wrap（'< div id =newPos/>'）;
}
} ）;


查看 http://jsfiddle.net/jfPZH/ （不工作，请参阅 Update Feb 2016 ）

当然，如果你不喜欢最初的闪烁，并想要一个更可靠的版本，你可以做各种改进，如fadeIn等： http://jsfiddle.net/vVLWg/ （不工作，请参阅 Update Feb 2016 ）

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

更新：使用这种方法，你可以定位任何其他控件（例如< a href =https://developers.google.com/maps/documentation/javascript/drawing =nofollow noreferrer>绘图库）。你只需要确保选择合适的容器！这是一个修改后的例子： http://jsfiddle.net/jP65p/1/ （不知何故仍然工作）

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

简单： http：/ /jsfiddle.net/hbnrqqoz/

花式的： http://jsfiddle.net / 2Luk68w5 /

I've read docs about positioning controls on the map(TOP, TOP_LEFT, etc), but Is there any way to make custom position? For example: left: 20px; top: 200px; I just want to have in top_left corner my logo and zoom control right under logo. And how to remove pan control in navigation controls? I want to have only zoom control in default style(not minimized). Thank you.

解决方案

Although the question is rather old, with almost 3k views it still seems to draw interest - So, here is my solution:

Wrap the controls!

First we have to find the container-element, where Google puts the control. This depends on which controls we want to use on the map. Google doesn't use unique ids for those containers. But all the controls have the class "gmnoprint" in common. So just counting the elements with "gmnoprint" does the job. Say we only want to use the "ZoomControlStyle.SMALL"-control. It's always the last element with "gmnoprint".

Now, we can simply style the element - Right? No. As soon as you zoom or resize the map, Google resets the styling of the controls. Bad luck, but: We can wrap a container around the controls and style this container!

Using jQuery, this is a really simple task:

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

We only have to make sure, the control is fully loaded by the time we try to wrap it. It's not totally bulletproof I guess, but using the MapsEventListener "tilesloaded" does a pretty good job:

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" />');
    }
});

Check out http://jsfiddle.net/jfPZH/ (not working, see Update Feb 2016)

Of course if you don't like the initial flicker and want a more reliable version you can do all kinds of improvements like fadeIn etc: http://jsfiddle.net/vVLWg/ (not working, see Update Feb 2016)

So, I hope some of you will find this useful - Have fun!

Update: With this method you can position any other control (e.g. the controls of the Drawing Library) as well. You just have to make sure to select the right container! This is a modified example: http://jsfiddle.net/jP65p/1/ (somehow still working)

Update: As of Feb 2016 Google seems to have changed the positioning of the map controls. This does not break my solution. It just needs some adjustment. So here are the updated fiddles:

Simple: http://jsfiddle.net/hbnrqqoz/
Fancy: http://jsfiddle.net/2Luk68w5/

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