1

当我将鼠标悬停在标记上时，有时会在标记上触发弹出窗口，有时会在坐标上触发。似乎它在第一次或最后一次注册事件时工作正常。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;
                          }
                       }
                });
             }

         }
4

0 回答 0