OpenLayers popup not responding to event
I have an OpenLayers map with a marker and a popup that's supposed to appear when I click on the marker. This works fine in IE8 but not in Firefox 3.6. Any ideas why? As far as I can tell the mousedown event is not getting fired since my log message doe开发者_JAVA技巧sn't appear. The map is at http://ndinfo.heroku.com/test.html and the code I use to create the marker and popup is:
function addMarker() {
var map = g_waze_map.map;
var markers1 = new OpenLayers.Layer.Markers( "Markers1" );
g_waze_map.map.addLayer(markers1);
var size = new OpenLayers.Size(21,25);
var offset = new OpenLayers.Pixel(-(size.w/2), -size.h);
var icon = new OpenLayers.Icon('http://www.openlayers.org/dev/img/marker.png',size,offset);
var marker = new OpenLayers.Marker(new OpenLayers.LonLat(34.7934759272249, 32.0835554760902),icon);
markers1.addMarker(marker);
marker.events.register('mousedown', marker, function(evt) {
console.log('hi');
var popup = new OpenLayers.Popup.FramedCloud(null,
marker.lonlat,
null,
"<div style='background-color:red; width:150;height:100'>hi</div>",
null,true,null);
map.addPopup(popup);
OpenLayers.Event.stop(evt);
});
}
Answer from here. The key was overriding the activate()
function in OpenLayers.Control.ModifyFeature
. I didn't realize having a control before creating the marker would affect the markers in any way, but it turns out that it does.
var shapes = new OpenLayers.Layer.Vector( "Shapes" );
map.addLayer(shapes);
var modifyControl = new OpenLayers.Control.ModifyFeature(shapes, {
activate: function() {
var activated = false;
if(OpenLayers.Handler.prototype.activate.apply(this, arguments)) {
this.map.events.on({
"removelayer": this.handleMapEvents,
"changelayer": this.handleMapEvents,
scope: this
});
activated = true;
}
return activated;
}
});
I think that marker
doesn't have any 'mousedown' event associated. But OpenLayers.Markers
probably has it. Try this:
// Create your markers layer
var markerLayer = new OpenLayers.Layer.Markers( "Markers1" );
// do whatever you want, and then...
// Create your marker
var marker = new OpenLayers.Marker(
new OpenLayers.LonLat(34.7934759272249, 32.0835554760902),
icon);
// Add your recently created marker to your markers layer
markerLayer.addMarker(marker);
// And bind 'mousedown' event to 'markers' layer, not to 'marker' object
markerLayer.events.register('mousedown', markerLayer, function(evt) {
console.log('hi');
var popup = new OpenLayers.Popup.FramedCloud(null,marker.lonlat,null,
"<div style='background-color:red; width:150;height:100'>hi</div>",
null,true,null);
map.addPopup(popup);
OpenLayers.Event.stop(evt);
});
Here is a little example: http://jsbin.com/ezeno3 (click on the map to create the mark, and then click on the mark to open a popup).
I hope it helps. Happy codding!
精彩评论