Подтвердить что ты не робот

Позиция настраиваемых элементов управления Google Maps API V3

Я прочитал документы о позиционировании элементов управления на карте (TOP, TOP_LEFT и т.д.), но есть ли способ сделать пользовательскую позицию? Например: left: 20px; top: 200px; Я просто хочу, чтобы в top_left углу мой логотип и зум-контроль прямо под логотипом. И как удалить управление панорамированием в элементах управления навигацией? Я хочу иметь только управление увеличением по умолчанию (не сведено к минимуму). Спасибо.

4b9b3361

Ответ 1

Хотя вопрос довольно старый, с почти 3 тыс. просмотров он все еще, кажется, привлекает интерес. Итак, вот мое решение:

Оберните элементы управления!

Сначала мы должны найти контейнер-элемент, где Google помещает элемент управления. Это зависит от того, какие элементы управления мы хотим использовать на карте. Google не использует уникальные идентификаторы для этих контейнеров. Но все элементы управления имеют класс "gmnoprint" . Так что просто подсчет элементов с помощью "gmnoprint" выполняет эту работу. Скажем, мы просто хотим использовать "ZoomControlStyle.SMALL" -control. Это всегда последний элемент с "gmnoprint" .

Теперь мы можем просто стилизовать элемент - правильно? Нет. Как только вы увеличиваете или изменяете размер карты, Google сбрасывает стиль элементов управления. Не повезло, но: мы можем обернуть контейнер вокруг элементов управления и создать этот контейнер!

Используя jQuery, это действительно простая задача:

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

Нам нужно только убедиться, что элемент управления полностью загружен ко времени, когда мы пытаемся его обернуть. Это не совсем пуленепробиваемый, я думаю, но использование MapsEventListener "patchloaded" делает довольно хорошую работу:

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/ (не работает, см. Обновление Feb 2016)

Конечно, если вам не нравится начальное мерцание и вы хотите получить более надежную версию, вы можете делать всевозможные улучшения, такие как fadeIn и т.д.: http://jsfiddle.net/vVLWg/ (не работает, см. Обновление Feb 2016)

Итак, я надеюсь, что некоторые из вас найдут это полезным - получайте удовольствие!

Обновление. С помощью этого метода вы можете расположить любой другой элемент управления (например, элементы управления http://jsfiddle.net/jP65p/1/ (как-то все еще работает)

Обновление. По состоянию на февраль 2016 года Google, похоже, изменил расположение элементов управления картой. Это не нарушает моего решения. Это просто нуждается в некоторой корректировке. Итак, вот обновленные скрипты:

Простой: http://jsfiddle.net/hbnrqqoz/
Fancy: http://jsfiddle.net/2Luk68w5/

Ответ 2

Это очень просто, просто добавьте это в свой файл css!

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

Он переместит управление 50px вниз без хаков или чего-нибудь!

Ответ 3

Вы можете создать собственный элемент управления для своего логотипа и добавить его на карту, чтобы разместить его. Вы не можете установить местоположение элемента управления непосредственно за пределы констант, но вы можете компенсировать местоположение с помощью прокладки на вашем управляющем div.

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

Ответ 4

набор

panControl : false,

в ZoomControlsOptions, который вы установили