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;
  39. function updateDegree()
  40. {
  41. var hlookat = kr.get('view.hlookat');
  42. // check offset
  43. offset = pmarks[activeId].offset;
  44. hlookat -= offset;
  45. $('#pMarkIcon').css({
  46. '-moz-transform': 'rotate(' + hlookat + 'deg)',
  47. '-webkit-transform': 'rotate(' + hlookat + 'deg)',
  48. '-o-transform': 'rotate(' + hlookat + 'deg)',
  49. '-ms-transform': 'rotate(' + hlookat + 'deg)'
  50. });
  51. }
  53. function initMap(ymaps)
  54. {
  55. map = new ymaps.Map("map", {center: [107.60863856012126, 51.80902072567784], zoom: 16, type: "yandex#publicMap", behaviors: ["default", "scrollZoom"]});
  56. clearTimeout(mapTimeout);
  57. mapLoaded = true;
  58. }
  60. function resetAll()
  61. {
  62. var size = pmarks.length;
  64. for (var i = 0; i < size; ++i)
  65. {
  66. if (typeof inactiveMarks[i] != 'undefined')
  67. map.geoObjects.remove(inactiveMarks[i]);
  68. inactiveMarks[i] = new ymaps.Placemark(pmarks[i].coords, {
  69. iconContent: '<img src="map/binocular.png" style=" background:url(\'map/blue-bg.png\');">'
  70. }, {
  71. iconImageHref: 'map/placemark-bg-blue.png',
  72. iconImageSize: [44, 55],
  73. iconImageOffset: [-17, -37],
  74. panoPath: pmarks[i].xml
  75. });
  76. if (typeof pmarks[i] != 'undefined')
  77. {
  78. inactiveMarks[i].events.add('click', function(p) {
  79. kr.call('loadpano(' + p.originalEvent.target.options.get('panoPath') + ')');
  80. });
  81. }
  82. map.geoObjects.add(inactiveMarks[i]);
  83. }
  84. }
  86. function addPmark(id)
  87. {
  88. if (!mapLoaded)
  89. {
  90. mapTimeout = setTimeout(function() {
  91. addPmark(id);
  92. }, 1000);
  93. return;
  94. }
  96. clearTimeout(mapTimeout);
  97. clearTimeout(degreeInterval);
  99. resetAll();
  101. if (typeof inactiveMarks[id] != 'undefined')
  102. map.geoObjects.remove(inactiveMarks[id]);
  104. map.geoObjects.remove(pMark);
  105. pMark = new ymaps.Placemark(pmarks[id].coords, {
  106. iconContent: '<img src="map/icon_large.png" id="pMarkIcon">',
  107. }, {
  108. iconImageHref: 'map/pixel.png',
  109. iconImageSize: [93, 93],
  110. iconImageOffset: [-54, -35]
  111. });
  112. map.geoObjects.add(pMark);
  113. degreeInterval = setInterval(updateDegree, 100);
  114. }
  116. function loaded(id)
  117. {
  118. activeId = id;
  119. addPmark(id);
  120. }
  121. </script>
  122. <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>
  123. <script src="swfkrpano.js"></script>
  124. <script src="swfaddress.js?tracker=null"></script>
  125. <script>
  126. var viewer = createPanoViewer({swf:"krpano.swf", id:"krpanoSWFObject", target:"krpanoDIV"});
  127. viewer.addVariable("xml", "tour.xml");
  128. viewer.embed();
  129. kr = document.getElementById('krpanoSWFObject');
  130. </script>
  131. </body>
  132. </html>