Нещодавно довелося реалізовувати підказки до векторних об'єктів на карті OpenLayers. Зробив, як описано на mail-archive.com. але після першої появи tooltip при переміщенні по карті з'явилася помилка в об'єкті OpenLayers.Popup метод hide () « 'this.div.style' - є null або не є об'єктом» або «this.div is null».
map.addLayer (markers);
// create select for tooltips (OpenLayers Feature Tooltip)
var highlightCtrl = new OpenLayers.Control.SelectFeature (markers, hover: true,
highlightOnly: true,
renderIntent: 'temporary',
eventListeners: featurehighlighted: tooltipSelect,
featureunhighlighted: tooltipUnselect
>
>);
// add control to the map
map.addControl (highlightCtrl);
// activate tooltip control
highlightCtrl.activate ();
function tooltipSelect (args) if (typeof args.feature.tooltip! = 'undefined' args.feature.tooltip! = null) return;
>
// remove tooltip if exists
if (tooltipPopup! = null) map.removePopup (tooltipPopup);
tooltipPopup.destroy ();
tooltipPopup = null;
>
var htmlContent = ''+ Args.feature.attributes.name +'
';
var center = args.feature.geometry.getBounds (). getCenterLonLat ();
tooltipPopup = new OpenLayers.Popup ( 'activetooltip',
center,
new OpenLayers.Size (240, 25),
htmlContent,
false);
tooltipPopup.closeOnMove = true;
tooltipPopup.autoSize = true;
// set tooltip style
tooltipPopup.backgroundColor = '# 000';
tooltipPopup.opacity = 0.85;
// jQuery wrapper
$ (TooltipPopup.div) .css ( 'border-width': '1px',
'Border-color': '# 000',
'Border-radius': '4px',
'Border-style': 'solid',
'Padding': '1px',
'Margin-left': '10px',
'Margin-top': '4px'
>);
// jQuery wrapper
$ (TooltipPopup.contentDiv) .css ( 'overflow': 'hidden',
'Padding': '8px',
'Color': '#fff'
>);
args.feature.tooltip = tooltipPopup;
map.addPopup (args.feature.tooltip);
>
function tooltipUnselect (args) if (typeof args.feature.tooltip! == 'undefined' args.feature.tooltip! == null) map.removePopup (args.feature.tooltip);
args.feature.tooltip.destroy ();
args.feature.tooltip = null;
tooltipPopup = null;
>
>
[/ Code]
Помилку довелося шукати в исходниках OpenLayers і прикладах для OpenLayers.Popup. У OpenLayers 2.11 помилка як і раніше має місце: все приклади, які мені доводилося бачити зберігають вже створені вікна popup в асоціативних масивах та при повторному натисканні на ключу дістають його звідти і просто змінюють контент (щось на зразок словника або шаблону Object Pool, коли створення об'єкта - складна операція і тому непотрібні об'єкти «очищають» і складають в «рюкзак»). Можливо, це правильна ідея - але я вирішив заощадити трохи пам'яті і видаляти popup повністю.
map.addLayer (markers);
// create select for tooltips (OpenLayers Feature Tooltip)
var highlightCtrl = new OpenLayers.Control.SelectFeature (markers, hover: true,
highlightOnly: true,
renderIntent: 'temporary',
eventListeners: featurehighlighted: tooltipSelect,
featureunhighlighted: tooltipUnselect
>
>);
// add control to the map
map.addControl (highlightCtrl);
// activate tooltip control
highlightCtrl.activate ();
function tooltipSelect (args) if (typeof args.feature.tooltip! = 'undefined' args.feature.tooltip! = null) return;
>
// remove tooltip if exists
if (tooltipPopup! = null) map.removePopup (tooltipPopup);
tooltipPopup.destroy ();
tooltipPopup = null;
>
var htmlContent = ''+ Args.feature.attributes.name +'
';
var center = args.feature.geometry.getBounds (). getCenterLonLat ();
tooltipPopup = new OpenLayers.Popup ( 'activetooltip',
center,
new OpenLayers.Size (240, 25),
htmlContent,
false);
tooltipPopup.closeOnMove = true;
tooltipPopup.autoSize = true;
// set tooltip style
tooltipPopup.backgroundColor = '# 000';
tooltipPopup.opacity = 0.85;
// jQuery wrapper
$ (TooltipPopup.div) .css ( 'border-width': '1px',
'Border-color': '# 000',
'Border-radius': '4px',
'Border-style': 'solid',
'Padding': '1px',
'Margin-left': '10px',
'Margin-top': '4px'
>);
// jQuery wrapper
$ (TooltipPopup.contentDiv) .css ( 'overflow': 'hidden',
'Padding': '8px',
'Color': '#fff'
>);
args.feature.tooltip = tooltipPopup;
map.addPopup (args.feature.tooltip);
>
function tooltipUnselect (args) if (typeof args.feature.tooltip! == 'undefined' args.feature.tooltip! == null) map.removePopup (args.feature.tooltip);
// fix: map property
args.feature.tooltip.map = map;
args.feature.tooltip.destroy ();
args.feature.tooltip = null;
tooltipPopup = null;
>
>
[/ Code]