マーカーにマウスを合わせると、ポップアップがマーカーでトリガーされることもあれば、座標でトリガーされることもあります。イベントが最初または最後に登録されたときに正しく機能するようです。MarkersObjs は、Web サービスからサーバー側で動的に作成されます。2 つの都市を使用するか、100 の都市を使用するかは問題ではないようです。
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;
}
}
});
}
}