当我将鼠标悬停在标记上时,有时会在标记上触发弹出窗口,有时会在坐标上触发。它似乎在第一次或最后一次注册事件时都是正确的。 markersObjs是从Web服务动态创建的服务器端。我是否使用两个城市或一百个城市似乎并不重要。
var map, baseLayer, markers;
function drawMap( ){
var markersObjs = {
'sections' : {
'Atlanta' : {id: '01', lat :'-84.42', lon :'33.65'},
'Denver' : {id: '02', lat :'-104.87', lon :'39.75'}
},
'chapters' : {
'Houston' : {id: '03', lat :'-95.35', lon :'29.97'},
'Orlando' : {id: '04', lat :'-81.32', lon :'28.43'}
}
};
map = new OpenLayers.Map("emap");
baseLayer = new OpenLayers.Layer.WMS( "Locals Map", "http://labs.metacarta.com/wms/vmap0", {layers:"basic"} );
map.addLayer( baseLayer );
map.setCenter( new OpenLayers.LonLat( -98, 38 ), 3.5 );
i = null;
for ( var value in markersObjs ){
//set the first object in loop show the rest are false
if(i == null){
show = true;
i++;
}else{
show = false;
}
addMarkers( value, markersObjs[value], show );
}
console.log(map);
}
function addMarkers( name, markersOBJ, show ){
markers = new OpenLayers.Layer.Markers( name );
markers.setVisibility(show);
map.addLayer( markers );
for( var value in markersOBJ ){
marker = new OpenLayers.Marker( new OpenLayers.LonLat( markersOBJ[value].lat, markersOBJ[value].lon ) );
marker.PlaneID = value;
marker.LinkID = markersOBJ[value].id;
markers.addMarker( marker);
//add on click marker.events.register('click', this.PlaneID , function(e){
console.log( 'marker(Click):\n');
console.log( marker );
console.log( '\n');
var markerLink = '/regions/?'+this.LinkID;
window.open( markerLink, '_top');
});
//add mouseover
marker.events.register('mouseover', marker, function(e){
console.log( 'this.PlaneID (mouseOver):\n');
console.log( this.PlaneID );
console.log( '\n');
popup= new OpenLayers.Popup.FramedCloud(this.PlaneID,
new OpenLayers.LonLat( this.lonlat.lon, this.lonlat.lat ),
null,
'<div class="mapPopUp">'+this.PlaneID+'<\/div>',
null,
false);
map.addPopup(popup);
console.log(map);
});
//here add mouseout event
markers.events.register('mouseout', marker, function(evt) {
for(var i=0; i<map.popups.length; i++){
if(map.popups[i].id == this.PlaneID){
console.log( 'this.PlaneID (mouseOut):\n');
console.log( this.PlaneID );
console.log( '\n');
map.popups[i].destroy();
break;
}
}
});
}
}