1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>KRPano</title>
  5. <meta name="viewport" content="target-densitydpi=device-dpi, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" />
  6. <meta name="apple-mobile-web-app-capable" content="yes" />
  7. <meta http-equiv="Content-Type" content="text/html;charset=windows-1251" />
  8. <style>
  9. html { height:100%; }
  10. body { height:100%; overflow: hidden; margin:0; padding:0; font-family:Arial, Helvetica, sans-serif; font-size:16px; color:#FFFFFF; background-color:#000000; }
  11. a{ color:#AAAAAA; text-decoration:underline; }
  12. a:hover{ color:#FFFFFF; text-decoration:underline; }
  13. </style>
  14. <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
  15. </head>
  16. <body>
  17. <div id="krpanoDIV" style="width:100%;height:50%;">
  18. <noscript><table style="width:100%;height:50%;"><tr style="valign:middle;"><td><div style="text-align:center;">ERROR:<br/><br/>Javascript not activated<br/><br/></div></td></tr></table></noscript>
  19. </div>
  20. <div id="map" style="width: 100%;height:50%"></div>
  21. <script type="text/javascript">
  22. var pmarks = [
  23. {coords: [107.60835728615834, 51.80498497161981], offset: 29.612430, iconContent: '1', xml: '%SWFPATH%/scenes/solar_tower_1/scene.xml'},
  24. {coords: [107.60834053847577, 51.80625216324661], offset: 52.541204, iconContent: '2', xml: '%SWFPATH%/scenes/solar_tower_2/scene.xml'},
  25. {coords: [107.60839418265618, 51.807256449274895], offset: 58.053150, iconContent: '3', xml: '%SWFPATH%/scenes/solar_tower_3/scene.xml'},
  26. {coords: [107.60832980963896, 51.807974732832555], offset: -59.017464, iconContent: '4', xml: '%SWFPATH%/scenes/solar_tower_4/scene.xml'},
  27. {coords: [107.60930374795694, 51.808262554869444], offset: 52.025996, iconContent: '5', xml: '%SWFPATH%/scenes/russian_dramatic_theater_1/scene.xml'}
  28. ];
  29. var pMark = {};
  30. var inactiveMarks = [];
  31. var map = {};
  32. var mapLoaded = false;
  33. var mapTimeout = 0;
  34. var kr = {};
  35. var degreeInterval = 0;
  36. var activeId = -1;
  37. var offset = 0.0;
  38. function updateDegree()
  39. {
  40. var hlookat = kr.get('view.hlookat');
  41. // check offset
  42. offset = pmarks[activeId].offset;
  43. hlookat -= offset;
  44. $('#pMarkIcon').css({
  45. '-moz-transform': 'rotate(' + hlookat + 'deg)',
  46. '-webkit-transform': 'rotate(' + hlookat + 'deg)',
  47. '-o-transform': 'rotate(' + hlookat + 'deg)',
  48. '-ms-transform': 'rotate(' + hlookat + 'deg)'
  49. });
  50. }
  51. function initMap(ymaps)
  52. {
  53. map = new ymaps.Map("map", {center: [107.60863856012126, 51.80902072567784], zoom: 16, type: "yandex#publicMap", behaviors: ["default", "scrollZoom"]});
  54. clearTimeout(mapTimeout);
  55. mapLoaded = true;
  56. }
  57. function resetAll()
  58. {
  59. var size = pmarks.length;
  60. for (var i = 0; i < size; ++i)
  61. {
  62. if (typeof inactiveMarks[i] != 'undefined')
  63. map.geoObjects.remove(inactiveMarks[i]);
  64. inactiveMarks[i] = new ymaps.Placemark(pmarks[i].coords, {
  65. iconContent: '<img src="map/binocular.png" style=" background:url(\'map/blue-bg.png\');">'
  66. }, {
  67. iconImageHref: 'map/placemark-bg-blue.png',
  68. iconImageSize: [44, 55],
  69. iconImageOffset: [-17, -37],
  70. panoPath: pmarks[i].xml
  71. });
  72. if (typeof pmarks[i] != 'undefined')
  73. {
  74. inactiveMarks[i].events.add('click', function(p) {
  75. kr.call('loadpano(' + p.originalEvent.target.options.get('panoPath') + ')');
  76. });
  77. }
  78. map.geoObjects.add(inactiveMarks[i]);
  79. }
  80. }
  81. function addPmark(id)
  82. {
  83. if (!mapLoaded)
  84. {
  85. mapTimeout = setTimeout(function() {
  86. addPmark(id);
  87. }, 1000);
  88. return;
  89. }
  90. clearTimeout(mapTimeout);
  91. clearTimeout(degreeInterval);
  92. resetAll();
  93. if (typeof inactiveMarks[id] != 'undefined')
  94. map.geoObjects.remove(inactiveMarks[id]);
  95. map.geoObjects.remove(pMark);
  96. pMark = new ymaps.Placemark(pmarks[id].coords, {
  97. iconContent: '<img src="map/icon_large.png" id="pMarkIcon">',
  98. }, {
  99. iconImageHref: 'map/pixel.png',
  100. iconImageSize: [93, 93],
  101. iconImageOffset: [-54, -35]
  102. });
  103. map.geoObjects.add(pMark);
  104. degreeInterval = setInterval(updateDegree, 100);
  105. }
  106. function loaded(id)
  107. {
  108. activeId = id;
  109. addPmark(id);
  110. }
  111. </script>
  112. <script type="text/javascript" src="http://api-maps.yandex.ru/2.0/?coordorder=longlat&load=package.full&wizard=constructor&lang=ru-RU&onload=initMap"></script>
  113. <script src="swfkrpano.js"></script>
  114. <script src="swfaddress.js?tracker=null"></script>
  115. <script>
  116. var viewer = createPanoViewer({swf:"krpano.swf", id:"krpanoSWFObject", target:"krpanoDIV"});
  117. viewer.addVariable("xml", "tour.xml");
  118. viewer.embed();
  119. kr = document.getElementById('krpanoSWFObject');
  120. </script>
  121. </body>
  122. </html>
Comments powered by Disqus