Question

I have a page with displays 10 markers in an openlayers map used via mapstraction.

I want to load map first then marker one by one say after every second, I tried using window.setTimeout() it loads the map and loads only first marker after that it stops.

  var map;
  var lat = new Array() ;
  lat=${latitude};
  var lon= new Array();
  lon=${longitude};
  var oneByOneCounter=0;
  var count=10;
  function initMap(){  
       map = new Mapstraction( mymap , openlayers );
       map.setCenter(new LatLonPoint(0.0,0.0));
       map.addControls({pan: true, zoom: small , map_type:true});
       renderMarkerOneByOne();
       map.autoCenterAndZoom();
     };


   function renderMarkerOneByOne() {
   if (oneByOneCounter < count) {
       latitude= lat[oneByOneCounter];
       longitude= lon[oneByOneCounter];
       var point = new LatLonPoint(latitude,longitude);
       var marker = new Marker(point);
       var info = "("+(oneByOneCounter+1)+")";
       marker.setInfoBubble(info);
       marker.setHover(true);
       marker.setIcon( icon_green.png , [27,31]);
       map.addMarker(marker);    
       oneByOneCounter++;
       window.setTimeout("renderMarkerOneByOne()", 1000);
     } else {
       oneByOneCounter = 0;
    }
   }

I am not able to figure out where I am doing wrong renderMarkerOneByOne() function executes properly and on putting alert() I can see the marker object is getting created all the time but, for some reason after the first marker gets plotted the other markers are not getting plotted on the map.

Any help or suggestion is welcomed

Thanks

Answer 1

Instead of setTimeout(), try setInterval().

Answer 2

It has to be something like this

var map;
var lat = new Array() ;
lat=${latitude};
var lon= new Array();
lon=${longitude};
var oneByOneCounter=0;
var count=10;
var centerPoint;
function initMap(){  
   map = new Mapstraction( mymap , openlayers );    
   map.addControls({pan: true, zoom: small , map_type:true});
  centerPoint= new LatLonPoint(lat[0],lon[0]);// or any point anyone wants to put center
   renderMarkerOneByOne();
   map.setCenterAndZoom(centerPoint,"desired zoom level");
 };

I found the solution after wasting too much time on debugging the code. Lots of mapstraction functions doesn t work properly with openlayers api

友情链接