C端蜂鸟地图
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

150 lines
6.2 KiB

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <title>地图</title>
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6. <script src="./lib/fengmap.map.min.js"></script>
  7. <script src="./lib/fengmap.plugin.min.js"></script>
  8. <script src="https://s3.pstatp.com/cdn/expire-1-M/jquery/3.1.1/jquery.min.js"></script>
  9. <link rel="stylesheet" href="./style/fengmap.css">
  10. </head>
  11. <body>
  12. <div id="fengmap"></div>
  13. </body>
  14. <script>
  15. document.write("<s"+"cript type='text/javascript' src='./common/js/h5_game_common.js?version="+Math.random()+"'></scr"+"ipt>");
  16. var map;
  17. // let baseUrl='https://ctest.malls.iformall.com/C';
  18. let baseUrl='/C';
  19. $.ajax({
  20. url:baseUrl + "/api/fengniaomap/getConfig",
  21. type:"GET",
  22. dataType: "json", //返回数据格式为json
  23. headers: {
  24. 'content-type':'application/json',
  25. "token":"c34103fa-1d40-4ba7-95a4-28975e1d9143:789:wx-cuser",
  26. // "token":getQueryString('token')
  27. },
  28. success:function(res){
  29. const data = res.data;
  30. let mapOptions = {
  31. appName: data.appName,
  32. key: data.appKey,
  33. mapID: data.mapId,
  34. container: document.getElementById("fengmap"),
  35. // mapURL: `/api/mapfile/${data.tenantId}/`,
  36. // themeURL: `/api/mapfile/${data.tenantId}/theme/`,
  37. mapURL:"./data/",
  38. themeURL:"./data/theme/",
  39. themeID: data.themeId,
  40. level: data.defaultFloor
  41. }
  42. let map = new fengmap.FMMap(mapOptions);
  43. // let mapOptions = {
  44. // appName: "金茂泊悦地图",
  45. // key: "cb54a3aa3a7066ec99b565363f63cb8c",
  46. // mapID: "1412326198669561858",
  47. // container: document.getElementById("fengmap"),
  48. // // mapURL: `/api/mapfile/${data.tenantId}/`,
  49. // // themeURL: `/api/mapfile/${data.tenantId}/theme/`,
  50. // mapURL:"../../data/",
  51. // themeURL:"../../data/theme/",
  52. // themeID: '2001',
  53. // level: 1
  54. // }
  55. let toolbarOptions = {
  56. //控件产生
  57. floorButtonCount: 3,
  58. viewModeControl: true, //是否显示2、3D切换按钮,默认为true
  59. floorModeControl: true, // 是否显示楼层控件,默认为true
  60. needAllLayerBtn: true, //是否显示单多层按钮,默认为true
  61. position: 3, //控件位置。分为左上 1、左下2、右上3、右下4。
  62. offset: { x: 0, y: 166 } //控件位置偏移。{x:10,y:10},基于原始位置的x,y方向的偏移。
  63. };
  64. let zoomOptions = {
  65. position: 3, //分为左上 1、左下2、右上3、右下4。
  66. offset: { x: 0, y: 50 } //控件位置偏移。{x:10,y:10},基于原始位置的x,y方向的偏移。
  67. };
  68. let compassOptions = {
  69. position: 2 //分为左上 1、左下2、右上3、右下4。
  70. };
  71. map.on("loaded", function() {
  72. let toolbar = new fengmap.FMToolbar(toolbarOptions); //楼层控件
  73. let zoomToolbar = new fengmap.FMZoomControl(zoomOptions); //缩放控件
  74. let compass = new fengmap.FMCompass(compassOptions); //指南针控件
  75. toolbar.addTo(map);
  76. zoomToolbar.addTo(map);
  77. compass.addTo(map);
  78. compass.on("click", function() {
  79. map.setRotation({
  80. rotation: 0,
  81. animate: true,
  82. duration: 0.3,
  83. finish: function() {
  84. // console.log("setRotation");
  85. }
  86. });
  87. });
  88. });
  89. }
  90. })
  91. // setTimeout(() => {
  92. // var options = {
  93. // appName: '金茂泊悦地图',
  94. // key: 'cb54a3aa3a7066ec99b565363f63cb8c',
  95. // mapID: '1412326198669561858',
  96. // container: document.getElementById('fengmap'),
  97. // mapURL: './data/',
  98. // themeURL: './data/theme/',
  99. // themeID: '2001',
  100. // }
  101. // let toolbarOptions = {
  102. // //控件产生
  103. // floorButtonCount: 3,
  104. // viewModeControl: true, //是否显示2、3D切换按钮,默认为true
  105. // floorModeControl: true, // 是否显示楼层控件,默认为true
  106. // needAllLayerBtn: true, //是否显示单多层按钮,默认为true
  107. // position: 3, //控件位置。分为左上 1、左下2、右上3、右下4。
  108. // offset: { x: 0, y: 166 } //控件位置偏移。{x:10,y:10},基于原始位置的x,y方向的偏移。
  109. // };
  110. // let zoomOptions = {
  111. // position: 3, //分为左上 1、左下2、右上3、右下4。
  112. // offset: { x: 0, y: 50 } //控件位置偏移。{x:10,y:10},基于原始位置的x,y方向的偏移。
  113. // };
  114. // let compassOptions = {
  115. // position: 2 //分为左上 1、左下2、右上3、右下4。
  116. // };
  117. // map = new fengmap.FMMap(options);
  118. // map.on('loaded', function () {
  119. // let toolbar = new fengmap.FMToolbar(toolbarOptions); //楼层控件
  120. // let zoomToolbar = new fengmap.FMZoomControl(zoomOptions); //缩放控件
  121. // let compass = new fengmap.FMCompass(compassOptions); //指南针控件
  122. // toolbar.addTo(map);
  123. // zoomToolbar.addTo(map);
  124. // compass.addTo(map);
  125. // compass.on("click", function () {
  126. // map.setRotation({
  127. // rotation: 0,
  128. // animate: true,
  129. // duration: 0.3,
  130. // finish: function () {
  131. // // console.log("setRotation");
  132. // }
  133. // });
  134. // });
  135. // });
  136. // }, 2000);
  137. </script>
  138. </html>