1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 | <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>OpenLayers Virtual Earth Example</title> <link rel="stylesheet" href="../theme/default/style.css" type="text/css" /> <link rel="stylesheet" href="style.css" type="text/css" /> <script src='http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.1'></script> <script src="../lib/OpenLayers.js"></script> <script type="text/javascript"> var map, velayer, layer; function init(){ map = new OpenLayers.Map('map', { controls: [new OpenLayers.Control.Navigation()], panMethod: OpenLayers.Easing.Linear.easeOut, panDuration: 10 }); velayer = new OpenLayers.Layer.VirtualEarth("VE", { minZoomLevel: 2, maxZoomLevel: 6, type: VEMapStyle.Road }); map.addLayer(velayer); map.setCenter(new OpenLayers.LonLat(25, 25), 0); map.addControl( new OpenLayers.Control.PanZoomBar() ); markers = new OpenLayers.Layer.Markers("markers"); map.addLayer(markers); for(var i=0;i<100;i++){ var lat= Math.floor(Math.random()*50); var lon= Math.floor(Math.random()*50); var lonLat=new OpenLayers.LonLat(lon,lat); var marker=new OpenLayers.Marker(lonLat); markers.addMarker(marker); } } </script> </head> <body onload="init()"> <h1 id="title">Virtual Earth Example</h1> <div id="tags"></div> <p id="shortdesc"> When using the PanZoom buttons with VirtualEarth, some 'drift' is possible in markers. This page demonstrates how to use the panMethod and panDuration properties to change the OpenLayers settings to match VirtualEarth. </p> <div id="map" class="smallmap"></div> </body> </html> |