Положение пользовательских элементов управления API Карт Google V3 - PullRequest
Новая
       21

Положение пользовательских элементов управления API Карт Google V3

24 голосов
/ 29 мая 2010

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

Ответы [ 4 ]

28 голосов
/ 19 марта 2012

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

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

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

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

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

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

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

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 г. )

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

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

Обновление: с помощью этого метода вы можете также позиционировать любой другой элемент управления (например, элементы управления Drawing Library ). Вы просто должны убедиться, что выбрали правильный контейнер! Это модифицированный пример: http://jsfiddle.net/jP65p/1/ (как-то все еще работает)

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

Простой: http://jsfiddle.net/hbnrqqoz/
Необычные: http://jsfiddle.net/2Luk68w5/

6 голосов
/ 21 марта 2013

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

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

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

6 голосов
/ 22 июня 2010

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

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

0 голосов
/ 26 июля 2012

набор 

panControl : false,

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

...