Отображение всплывающей подсказки по клику на карте.

[novice]

Имеется контрол:

Код: Выделить всё

    var buttonInfo = new OpenLayers.Control.Button({
        title:'Информация по координатам',
        displayClass:'CursorInfo', activate: OnCursorInfo, deactivate: OffCursorInfo, type: OpenLayers.Control.TYPE_TOOL
    });

и функции

Код: Выделить всё

function OnCursorInfo() {
    if(this.panel_div)
        this.panel_div.className = "CursorInfoItemActive"
}
function OffCursorInfo() {
    if(this.panel_div)
        this.panel_div.className = "CursorInfoItemInactive"
}

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

[Denis Rykov]

То, что вам нужно есть в официальных примерах OpenLayers - Open Popup on Layer.Vector.

[novice]

спасибо, использовал этот пример, но тут клики на объекты слоя.

А нужен клик просто по виджету карты и получение координат. Т.е. кликнули на место в карте и в этом месте появляется всплывающая подсказка с координатами клика. Кликнули на другую точку карты - предыдущая подсказка исчезла, а в новом месте появилась новая подсказка.

[Denis Rykov]

Довольно странное использование попапа, может все-таки OpenLayers.Control.MousePosition?

[novice]

в дальнейшем планируется такой механизм: когда активна кнопка buttonInfo, то по клику на область карты мы получаем координаты, по этим координатам в номинатиме ищем первый(или несколько) населенных пунктов с этими координатами и выводим эту информацию в подсказке. Поиск в базе происходит моментально, поэтому многопоточность здесь не нужна вроде бы.

[Denis Rykov]

Код: Выделить всё

(function() {



function handleMapClick(e) {

    var lonlat = map.getLonLatFromViewPortPx(e.xy);

    var popup = new OpenLayers.Popup.FramedCloud(

        "chicken",

        lonlat,

        null,

        "<b>Широта: </b>" + lonlat.lat + "<br><b>Долгота: </b>" + lonlat.lon,

        null,

        true,

        null);

    map.addPopup(popup, true);

}



var map = new OpenLayers.Map('map');

var base_layer = new OpenLayers.Layer.OSM();

map.addLayer(base_layer);

map.zoomToMaxExtent();

map.events.register('click', map, handleMapClick);

})()

DEMO

[novice]

На примере не воспроизводится, но у меня появилась такая проблема: у подсказки нет "хвоста", который бы указывал на место клика.

На примере есть другая проблема. Когда кликаем на область рядом с подсказкой - нет никакой реакции, новая подсказка не появляется.

[Denis Rykov]

1. Что-то не так с OpenLayers, попробуйте либо обновить, либо подключить библиотеку с сайта OL (как в демо);
2. Потому что вы кликаете в div попапа и поскольку этот div перекрывает div карты, то карта не отлавливает события клика. Победить можно, например, используя попап без хвоста.

[novice]

1. Спасибо, а чтобы обновить библиотеку достаточно скачать и заемить файл OpenLayers.js и папки img и theme? Мы размещаем скрипты прямо в папке с библиотекой OpenLayers - это критично?

2. А есть вариант - чтобы была и подсказка с хвостом, и клики по карте? Можно ли также разместить красный крестик внутри подсказки, а не снаружи?

[ericsson]

novice, у вас css-стили popup и каких-то еще элементов оформления конфликтуют, popup выглядит так, как не должен выглядеть. Смотрите firebug-ом (если, конечно, владеете css+html, что из ваших вопросов не следует).
Заранее предупреждаю, что за вас вашу работу делать не буду, а то вы чуть что - "выложите код".

[novice]

а можете, пожалуйста, выложить стандартные настройки попапа из опенлаерса.

[ericsson]

Какие еще "настройки"?
У блока popup (он, к слову, состоит из нескольких частей) есть css-стили. Они все хранятся в css-файле, который входит в комплект openlayers.
Открываете любой отладчик (firebug, например, или встроенный в Оперу или Хром), щелкаете мышью на своем popup правой кнопкой, выбираете Inspect Element, далее - выбираете по очереди все блоки, из которых состоит popup и смотрите, какие стили им назначены. Если там окажутся стили не только из css-файла openlayers, но и от самой страницы - селекторы этих стилей надо будет переписать. Если вы не знаете, как это делается, найдите того, кто знает, или садитесь за учебник HTML/CSS - на пальцах объяснять это бессмысленно.

[novice]

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

Какие еще "настройки"?

а как профессионалы называют таблицу стилей?

[ericsson]

Так и называют - "таблица стилей".

Во-первых, да - сложно, потому что нужно все то что я описал, проделать самому.
Во-вторых, непонятно - зачем, потому что у меня опыт веб-разработки - 12 лет, и я понимаю, что вы просите то, что вам не нужно (точнее - то, что у вас уже есть).

[novice]

Вот CSS стили. Для каждого компонента они многократно переопределены. Мне эта информация ничего не дает.

А вот если бы были "исходные стили" для этого контрола, то я мог бы написать их внутри скриптового кода еще раз, переопределив все свойства. Этот код, конечно, пованивал бы, но проблему бы решил. Я так раньше поступал с редактором.

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