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

问题描述

我已经阅读了有关地图上定位控件的文档(TOP、TOP_LEFT 等)，但是有没有办法自定义位置?例如:left: 20px;顶部:200px;我只想在左上角有我的徽标和徽标正下方的缩放控件.以及如何删除导航控件中的平移控件?我只想在默认样式(未最小化)中使用缩放控件.谢谢.

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.

推荐答案

虽然这个问题已经很老了，但几乎 3k 的浏览量似乎仍然引起了人们的兴趣 - 所以，这是我的解决方案:

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

首先我们必须找到容器元素，谷歌将控件放在那里.这取决于我们要在地图上使用哪些控件.Google 不会为这些容器使用唯一 ID.但是所有的控件都有一个共同的类gmnoprint".所以只需用gmnoprint"计算元素就可以了.假设我们只想使用ZoomControlStyle.SMALL"控件.它总是带有gmnoprint"的最后一个元素.

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".

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

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!

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

Using jQuery, this is a really simple task:

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

我们只需要确保在我们尝试包装它时控件已完全加载.我猜这不是完全防弹的，但是使用 MapsEventListenertilesloaded"做得很好:

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

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

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

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

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)

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

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

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)

更新:自 2016 年 2 月起，Google 似乎更改了地图控件的位置.这不会破坏我的解决方案.它只是需要一些调整.所以这里是更新的小提琴:

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:

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

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