信阳市12345演示系统-前端代码

spotDist.html 7.1KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>工单报表</title>
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <script src="../Script/Common/huayi.load.js"></script>
  8. <script src="../Script/Common/huayi.config.js"></script>
  9. <link href="../css/init.css" rel="stylesheet" />
  10. <script src="../js/laydate/laydate.js"></script>
  11. <style>
  12. .Shows {
  13. display: block !important;
  14. }
  15. .complain {
  16. display: none;
  17. }
  18. .daoHang {
  19. margin-bottom: 15px;
  20. }
  21. #main1,
  22. #main2 {
  23. width: 788.8px;
  24. margin: 0 auto;
  25. -webkit-box-shadow: 1px 1px 9px 2px #D2D2D2;
  26. box-shadow: 1px 1px 9px 2px #D2D2D2;
  27. background-color: #fff;
  28. padding: 30px 60px 80px 60px;
  29. }
  30. .alignC {
  31. text-align: center;
  32. }
  33. .alignC h2 {
  34. font-family: "宋体";
  35. font-weight: bold;
  36. font-size: 22pt;
  37. letter-spacing: -1px;
  38. }
  39. .headerAlign h3 div:nth-of-type(1) {
  40. font-size: 14pt;
  41. padding-top: 20px;
  42. text-align: left;
  43. font-weight: normal;
  44. margin-left: 48px;
  45. }
  46. #main1 table,
  47. #main2 table {
  48. margin: 0 auto;
  49. width: 600px;
  50. border-collapse: collapse;
  51. font-size: 13pt;
  52. font-family: "仿宋";
  53. }
  54. #main1 table tr,
  55. #main2 table tr {
  56. min-height: 49px;
  57. }
  58. tbody td {
  59. min-width: 10%;
  60. padding: 6px 0 6px 0;
  61. }
  62. .alignC .tableHead {
  63. text-align: center;
  64. padding-left: 10px;
  65. font-weight: 600;
  66. }
  67. .alignC tr>td>span {
  68. display: inline-block;
  69. min-width: 90px;
  70. }
  71. .btn {
  72. margin-top: 4px;
  73. margin-bottom: 4px;
  74. background: #00a1cb;
  75. color: #fff;
  76. }
  77. .time-box {
  78. display: inline-block;
  79. position: relative;
  80. }
  81. .toolLeft input {
  82. padding-right: 30px;
  83. width: 150px;
  84. }
  85. </style>
  86. </head>
  87. <body class="gray-bg">
  88. <div class="wrapper wrapper-content animated fadeInRight">
  89. <div class="daoHang clearfix">
  90. <div class="dhLeft">
  91. <sapn>
  92. <i class="syIcon"></i>位置:
  93. <a href="javaScript:;" id="ReIndex">首页</a>&gt;
  94. <a href="javaScript:;">业务统计</a>&gt;
  95. <a class="nowPosition">工单报表</a>
  96. </sapn>
  97. </div>
  98. <div class="dhRight">
  99. <a href="" title="刷新"><i class="fa fa-refresh"></i></a>
  100. </div>
  101. </div>
  102. <div class="Content_box">
  103. <div class="complain Shows">
  104. <div class="tab-content">
  105. <div class="tab-pane fade active in" id="import_from_week">
  106. <div class="toolBar clearfix">
  107. <div class="toolLeft">
  108. <td colspan="7">
  109. <select class="select_" id="sourcearea">
  110. <option value="请选择">请选择</option>
  111. <option value="浉河区">浉河区</option>
  112. <option value="平桥区">平桥区</option>
  113. <option value="潢川县">潢川县</option>
  114. <option value="光山县">光山县</option>
  115. <option value="息县">息县</option>
  116. <option value="新县">新县</option>
  117. <option value="罗山县">罗山县</option>
  118. <option value="商城县">商城县</option>
  119. <option value="淮滨县">淮滨县</option>
  120. <option value="固始县">固始县</option>
  121. </select>
  122. </td>
  123. </div>
  124. </div>
  125. <div style="width:1000px">
  126. <div id="allmap" style="width:100%;height:400px;"></div>
  127. <input type="hidden" class="store_Lng" value="115.659773"/>
  128. <input type="hidden" class="store_Lat" value="34.395449" />
  129. </div>
  130. </div>
  131. </div>
  132. </div>
  133. </div>
  134. </div>
  135. <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=SyRux96r0i0Xue1Qqp0ZPb4uCc8BC6Aw"></script>
  136. <!-- <script src="spotIndex.js"></script> -->
  137. <script>
  138. // 百度地图API功能
  139. var map = new BMap.Map("allmap");
  140. var point = new BMap.Point(114.090325, 32.129247);
  141. map.centerAndZoom(point, 15);
  142. map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
  143. var json_data = [
  144. [114.106931,32.153136],
  145. [114.106904,32.152269],
  146. [114.104631,32.15241],
  147. [114.096677,32.151925],
  148. [114.071201,32.146407],
  149. [114.061751,32.146285],
  150. [114.04709,32.13592],
  151. [114.062541,32.122772],
  152. [114.069512,32.155058],
  153. [114.016476,32.174376],
  154. [114.267858,32.162272],
  155. [114.098473,31.874672],
  156. [114.185214,31.885894],
  157. [114.12563,32.101043],
  158. [114.162792,32.407023],
  159. [114.052408,32.355308],
  160. [113.967249,32.30216],
  161. [114.44486,32.2513],
  162. [114.333326,32.311864],
  163. [114.562143,32.10069],
  164. [114.525061,32.198517],
  165. [114.52233,32.216482],
  166. [114.543602,32.206583],
  167. [114.513994,32.222713],
  168. [114.516293,32.096041]
  169. ];
  170. var pointArray = new Array();
  171. var opts = {
  172. width: 250, // 信息窗口宽度
  173. height: 80, // 信息窗口高度
  174. title: "", // 信息窗口标题
  175. enableMessage: true //设置允许信息窗发送短息
  176. };
  177. $('#sourcearea').change(function(obj) {
  178. if($('#sourcearea').val() == "") {
  179. alert("请选择省市区");
  180. return;
  181. }
  182. var address = '河南省信阳' + $('#sourcearea').find("option:selected").text();;
  183. //var address = '河南省商丘市睢阳区'
  184. if(address != "") {
  185. var city = '商丘市';
  186. // 创建地址解析器实例
  187. var myGeo = new BMap.Geocoder();
  188. myGeo.getPoint(address, function(point) {
  189. if(point) {
  190. //定位到区 ,级别显示12
  191. map.centerAndZoom(point, 12);
  192. //删除选点
  193. map.clearOverlays();
  194. for(var i = 0; i < json_data.length; i++) {
  195. var marker = new BMap.Marker(new BMap.Point(json_data[i][0], json_data[i][1])); // 创建点
  196. map.addOverlay(marker); //增加点
  197. pointArray[i] = new BMap.Point(json_data[i][0], json_data[i][1]);
  198. var content = json_data[i][2];
  199. addClickHandler(content, marker);
  200. }
  201. } else {
  202. // alert("您选择地址没有解析到结果!");
  203. }
  204. }, city);
  205. }
  206. });
  207. for(var i = 0; i < json_data.length; i++) {
  208. var marker = new BMap.Marker(new BMap.Point(json_data[i][0], json_data[i][1])); // 创建点
  209. map.addOverlay(marker); //增加点
  210. pointArray[i] = new BMap.Point(json_data[i][0], json_data[i][1]);
  211. var content = json_data[i][2];
  212. addClickHandler(content, marker);
  213. }
  214. //让所有点在视野范围内
  215. map.setViewport(pointArray);
  216. function addClickHandler(content, marker) {
  217. marker.addEventListener("click", function(e) {
  218. openInfo(content, e)
  219. });
  220. }
  221. function openInfo(content, e) {
  222. var p = e.target;
  223. var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);
  224. var infoWindow = new BMap.InfoWindow(content, opts); // 创建信息窗口对象
  225. map.openInfoWindow(infoWindow, point); //开启信息窗口
  226. }
  227. //移动到某一坐标点
  228. function to(x, y) {
  229. map.panTo(new BMap.Point(x, y));
  230. }
  231. </script>
  232. </body>
  233. </html>