Здравствуйте. Немного получается показать всплывающее меню с 1 раза, когда щелкаешь правой кнопкой на feature. Подскажите пожалуйста.
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='utf-8' />
<title>map</title>
<script type='text/javascript' src='../lib/OpenLayers.js'></script>
<script src="jquery.js"></script>
<script src="jquery.contextmenu.js"></script>
<link rel="stylesheet" href="jquery.contextmenu.css">
<script type='text/javascript'>
var map;
var vectorLayer;
$(function() {
$('#mythingy').contextPopup({
title: 'My Popup Menu',
items: [
{label:'Some Item', icon:'icons/shopping-basket.png', action:function() { alert('clicked 1') } },
{label:'Another Thing', icon:'icons/receipt-text.png', action:function() { alert('clicked 2') } },
{label:'Blah Blah', icon:'icons/book-open-list.png', action:function() { alert('clicked 3') } },
null, // divider
{label:'Sheep', icon:'icons/application-monitor.png', action:function() { alert('clicked 4') } },
{label:'Cheese', icon:'icons/bin-metal.png', action:function() { alert('clicked 5') } },
{label:'Bacon', icon:'icons/magnifier-zoom-actual-equal.png', action:function() { alert('clicked 6') } },
null, // divider
{label:'Onwards', icon:'icons/application-table.png', action:function() { alert('clicked 7') } },
{label:'Flutters', icon:'icons/cassette.png', action:function() { alert('clicked 8') } }
]
});
});
function DoYearReport(k)
{
}
function init()
{
map = new OpenLayers.Map('map_element', {});
var wms = new OpenLayers.Layer.WMS(
'OpenLayers WMS',
'http://vmap0.tiles.osgeo.org/wms/vmap0',
{layers: 'basic'},
{}
);
map.addLayer(wms);
// allow testing of specific renderers via "?renderer=Canvas", etc
var renderer = OpenLayers.Util.getParameters(window.location.href).renderer;
renderer = (renderer) ? [renderer] : OpenLayers.Layer.Vector.prototype.renderers;
var vectorLayer = new OpenLayers.Layer.Vector("Simple Geometry", {
styleMap: new OpenLayers.StyleMap({'default':{
strokeColor: "#00FF00",
strokeOpacity: 1,
strokeWidth: 3,
fillColor: "#FF5500",
fillOpacity: 0.5,
pointRadius: 6,
pointerEvents: "visiblePainted",
// label with \n linebreaks
label : "name: ${name}\n\nage: ${age}",
fontColor: "${favColor}",
fontSize: "12px",
fontFamily: "Courier New, monospace",
fontWeight: "bold",
labelAlign: "${align}",
labelXOffset: "${xOffset}",
labelYOffset: "${yOffset}",
labelOutlineColor: "white",
labelOutlineWidth: 3
}}),
renderers: renderer
});
// Create a point feature to show the label offset options
var labelOffsetPoint = new OpenLayers.Geometry.Point(-101.04, 35.68);
var labelOffsetFeature = new OpenLayers.Feature.Vector(labelOffsetPoint);
labelOffsetFeature.attributes = {
name: "offset",
age: 22,
favColor: 'blue',
align: "cm",
// positive value moves the label to the right
xOffset: 50,
// negative value moves the label down
yOffset: -15
};
// create a point feature
var point = new OpenLayers.Geometry.Point(-111.04, 45.68);
var pointFeature = new OpenLayers.Feature.Vector(point);
pointFeature.attributes = {
name: "toto",
age: 20,
favColor: 'red',
align: "cm"
};
var nullFeature = new OpenLayers.Feature.Vector(null);
nullFeature.attributes = {
name: "toto is some text about the world",
age: 20,
favColor: 'red',
align: "cm"
};
map.addLayer(vectorLayer);
map.setCenter(new OpenLayers.LonLat(-109.370078125, 43.39484375), 4);
vectorLayer.addFeatures([pointFeature, labelOffsetFeature, nullFeature ]);
if(!map.getCenter())
{
map.zoomToMaxExtent();
}
// Get control of the right-click event:
document.getElementById('map_element').oncontextmenu = function(e)
{
e = e?e:window.event;
if (e.preventDefault) e.preventDefault(); // For non-IE browsers.
else return false; // For IE browsers.
};
// A control class for capturing click events...
OpenLayers.Control.Click = OpenLayers.Class(OpenLayers.Control,
{
defaultHandlerOptions: {
'single': true,
'double': true,
'pixelTolerance': 0,
'stopSingle': false,
'stopDouble': false
},
handleRightClicks:true,
initialize: function(options) {
this.handlerOptions = OpenLayers.Util.extend(
{}, this.defaultHandlerOptions
);
OpenLayers.Control.prototype.initialize.apply(
this, arguments
);
this.handler = new OpenLayers.Handler.Click(
this, this.eventMethods, this.handlerOptions
);
},
CLASS_NAME: "OpenLayers.Control.Click"
});
// Add an instance of the Click control that listens to various click
events:
var oClick = new OpenLayers.Control.Click({eventMethods:{
'rightclick': function(e) {
var po = vectorLayer.getFeatureFromEvent(e);
if (po)
{
var lonlat = map.getLonLatFromViewPortPx(e.xy);
if (lonlat)
{
var temp = document.getElementById("mythingy");
if (temp)
{
temp.style.left = (e.x-5)+'px';
temp.style.top = (e.y-5)+'px';
}
//не хочет с 1 раза показывать меню
$('#mythingy').trigger({
type: 'mousedown',
which: 3
}).trigger({
type: 'mouseup',
which: 3
});
}
}
},
'click': function(e) {
console.log('click at '+e.xy.x+','+e.xy.y);
},
'dblclick': function(e) {
console.log('dblclick at '+e.xy.x+','+e.xy.y);
},
'dblrightclick': function(e) {
console.log('dblrightclick at '+e.xy.x+','+e.xy.y);
}
}});
map.addControl(oClick);
oClick.activate();
}
</script>
</head>
<body onload='init();'>
<div id='map_element' style='width: 800px; height: 600px;'></div>
<div id="mythingy" style="position:absolute;width:5px; height: 5px; margin: 0px; border:0px dashed #666666; padding:6px;z-index:999999999"> </div>
</body>
</html>