projectPointAll.jsp 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355
  1. <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
  2. <%@include file="/context/mytags.jsp"%>
  3. <t:base type="jquery,easyui,tools,DatePicker"></t:base>
  4. <script src = "plug-in/tools/jquery.tips.js"></script>
  5. <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=Cq7aZVbka0L3UXDLgkKFoiFqnZAwPdS4"></script>
  6. <body style="overflow-y: hidden" scroll="no">
  7. <style type="text/css">
  8. body{font-size:13px;margin:0px}
  9. #container{width:100%;height:100%;}
  10. .label{margin-left:20px;font-weight:bold;font-size:14px}
  11. .lng-lat{
  12. margin: 0 0 30px 0px;
  13. }
  14. .lng-lat .item{
  15. margin: 20px;
  16. }
  17. .angle{
  18. display: inline-block;
  19. width: 0px;
  20. height: 0px;
  21. position: absolute;
  22. bottom:-60px;
  23. border: 14px solid;
  24. left: 15px;
  25. bottom: -25px;
  26. opacity: 0.8;
  27. border-color: #333333 transparent transparent transparent;
  28. }
  29. .datagrid-btable .datagrid-cell{text-overflow:ellipsis;white-space: nowrap;}
  30. </style>
  31. <div id="main_list" class="easyui-layout" fit="true" style="height: 40px;">
  32. <!-- <div style="margin:10px">搜&ensp;&ensp;&ensp;&ensp;索: <input type="text" id="suggestId" size="30" value="百度" style="width:300px;" /></div>
  33. --> <div class="lng-lat">
  34. <!-- <div class="item">
  35. 当前经度:
  36. <input type="text" id="jing" type=""/>
  37. </div>
  38. <div class="item">
  39. 当前纬度:
  40. <input type="text" id="wei" />
  41. -->
  42. <span style="display:-moz-inline-box;display:inline-block;float: right;margin-right: 10px;" >
  43. <%-- &ensp;&ensp;&ensp;&ensp;集约化项目分类:
  44. <t:dictSelect field="intensiveProjectType" type="radio" typeGroupCode="intensiveProjectType" defaultVal="qpshuiwusuo" hasLabel="false" title="发送时间类型" ></t:dictSelect>
  45. &ensp;&ensp;&ensp;&ensp;项目名称:
  46. <input type="text" id="name" class="text" />
  47. <a href="#" class="easyui-linkbutton l-btn" iconcls="icon-add" style="margin-left: 50px;" onclick="addPoint()" id="">
  48. <span>保存此点位</span>
  49. </a> --%>
  50. <a href="#" class="easyui-linkbutton l-btn" style="padding-top: 5px;" iconcls="icon-view" onclick="showAllPoint('qpgonganju')" id="upexport">
  51. <span>青浦公安</span>
  52. </a>
  53. <a href="#" class="easyui-linkbutton l-btn" style="padding-top: 5px;" iconcls="icon-view" onclick="showAllPoint('qpshuiwuxitong')" id="upexport">
  54. <span>青浦水务</span>
  55. </a>
  56. <a href="#" class="easyui-linkbutton l-btn" style="padding-top: 5px;" iconcls="icon-view" onclick="showAllPoint('qpshuiwusuo')" id="upexport">
  57. <span>青浦税务</span>
  58. </a>
  59. <a href="#" class="easyui-linkbutton l-btn" style="padding-top: 5px;" iconcls="icon-view" onclick="showAllPoint('songjiang')" id="upexport">
  60. <span>松江</span>
  61. </a>
  62. <a href="#" class="easyui-linkbutton l-btn" style="padding-top: 5px;" iconcls="icon-view" onclick="showAllPoint('qpmain')" id="upexport">
  63. <span>青浦主要服务点</span>
  64. </a>
  65. <a href="#" class="easyui-linkbutton l-btn" style="padding-top: 5px;" iconcls="icon-view" onclick="showAllPoint('all')" id="upexport">
  66. <span>显示全部项目点位</span>
  67. </a>
  68. </span>
  69. </div>
  70. </div>
  71. <div id="container"></div>
  72. </div>
  73. </body>
  74. <script type="text/javascript">
  75. $(function(){
  76. /* var newtitle = '【' +'${schedule.carname}' + '】' + '${schedule.start}' + '~' +'${schedule.end}'+' 作业途径点位列表'; //
  77. $("#detailList").datagrid({title:newtitle}); */
  78. /* if($("#tasktype").val().length == 0)
  79. document.getElementById("tasktype").readonly=false; */
  80. });
  81. function addPoint(){
  82. if(!$('#jing').val()){
  83. tip('请先在地图上选择位置,然后再添加到路径点');
  84. return;
  85. }
  86. if (!$('#name').val())
  87. {
  88. tip('请输入项目名称,请重新录入');
  89. return;
  90. }
  91. $.ajax({
  92. url:"intensiveController.do?doAddFromMap",
  93. data:{name:$('#name').val(),
  94. lng:$('#jing').val(),
  95. lat:$('#wei').val(),
  96. intensiveProjectType:$('input:radio[name="intensiveProjectType"]:checked').val()
  97. },
  98. type:"Post",
  99. dataType:"json",
  100. success:function(data){
  101. if(data.success){
  102. tip(data.msg);
  103. /* $("#detailList").datagrid('reload'); */
  104. $('#name').val('');
  105. }else{
  106. $.messager.alert('提示信息',data.msg);
  107. }
  108. }});
  109. /* //添加完刷新表格
  110. $('#detailList').datagrid({
  111. queryParams:{scheduleid:$('#scheduleid').val()}
  112. });
  113. $("#detailList").datagrid('reload'); */
  114. }
  115. var myLabels = [];
  116. function showAllPoint(type){
  117. var url = "intensiveController.do?all";
  118. if(type != 'all'){
  119. url += '&intensiveProjectType='+type;
  120. }
  121. $.ajax({
  122. url:url,
  123. data:{
  124. },
  125. type:"Post",
  126. dataType:"json",
  127. success:function(data){
  128. if(data.status=="success"){
  129. map.clearOverlays();
  130. var point = new BMap.Point(data.details[0]['lng'],data.details[0]['lat']);
  131. map.centerAndZoom(point,13);
  132. myLabels = [];
  133. for(var i =0; i < data.details.length;i++){
  134. var maker = addMarker(new BMap.Point(data.details[i]['lng'], data.details[i]['lat']),data.details[i]['intensiveProjectType']);
  135. addInfoWindow(maker, data.details[i]['name'],data.details[i]['intensiveProjectType']);
  136. }
  137. }else{
  138. $.messager.alert('提示信息',"未查询到项目位置信息");
  139. }
  140. }});
  141. }
  142. //添加信息窗口
  143. function addInfoWindow(marker, content,type) {
  144. var offsetSize = new BMap.Size(0, 0);
  145. var labelStyle = {
  146. color: "#fff",
  147. backgroundColor: "0.05",
  148. border: "0"
  149. };
  150. //不同数字长度需要设置不同的样式。
  151. /* switch((number + '').length) {
  152. case 1:
  153. labelStyle.fontSize = "14px";
  154. offsetSize = new BMap.Size(4, 2);
  155. break;
  156. case 2:
  157. labelStyle.fontSize = "12px";
  158. offsetSize = new BMap.Size(2, 4);
  159. break;
  160. case 3:
  161. labelStyle.fontSize = "10px";
  162. offsetSize = new BMap.Size(-2, 4);
  163. break;
  164. default:
  165. break;
  166. } */
  167. var label = new BMap.Label('');
  168. label.setStyle(labelStyle);
  169. marker.setLabel(label);
  170. var label = new window.BMap.Label(content, { offset: new BMap.Size(20, -10) });
  171. marker.setLabel(label);
  172. }
  173. //添加标注
  174. function addMarker(point,type) {
  175. var imageoffsetValue = 10;
  176. if(type == 'qpgonganju')//青浦公安局
  177. imageoffsetValue = 11;
  178. if(type == 'qpshuiwuxitong')//青浦水务系统
  179. imageoffsetValue = 10;
  180. if(type == 'qpshuiwusuo')//青浦税务所
  181. imageoffsetValue = 12;
  182. var myIcon ;
  183. myIcon = new BMap.Icon("http://api.map.baidu.com/img/markers.png", new BMap.Size(23, 25), {
  184. offset: new BMap.Size(10, 25), // 指定定位位置
  185. imageOffset: new BMap.Size(0, 0 - imageoffsetValue * 25) // 设置图片偏移
  186. });
  187. if(type == 'qpmain')//青浦主要项目
  188. {
  189. myIcon = new BMap.Icon(
  190.         "images/location.png",//"images/location.png",
  191.         new BMap.Size(48,48), // 视窗大小
  192.         {
  193. anchor:new BMap.Size(24,48),
  194.           imageSize: new BMap.Size(48,48), // 引用图片实际大小
  195.           imageOffset:new BMap.Size(0,0) // 图片相对视窗的偏移
  196.         }
  197.      );
  198. }else if(type == 'songjiang'){//松江
  199. myIcon = new BMap.Icon(
  200.         "images/location-lowblue.png",//"images/location.png",
  201.         new BMap.Size(24,24), // 视窗大小
  202.         {
  203. anchor:new BMap.Size(12,24),
  204.           imageSize: new BMap.Size(24,24), // 引用图片实际大小
  205.           imageOffset:new BMap.Size(0,0) // 图片相对视窗的偏移
  206.         }
  207.      );
  208. }
  209. var marker = new BMap.Marker(point,{icon:myIcon});
  210. map.addOverlay(marker);
  211. return marker;
  212. }
  213. function deletePoine(){
  214. $.ajax({
  215. url:"carScheduleDetailController.do?doDelByPoint",
  216. data:{scheduleid:$('#scheduleid').val(),
  217. lng:$('#jing').val(),
  218. lat:$('#wei').val()},
  219. type:"Post",
  220. dataType:"json",
  221. success:function(data){
  222. if(data.status=="success"){
  223. }else{
  224. $.messager.alert('提示信息',"添加到路径点失败");
  225. }
  226. }});
  227. }
  228. function showPoint(lng,lat,address){
  229. //清除地图上的marker
  230. map.clearOverlays();
  231. var marker = new BMap.Marker(new BMap.Point(lng, lat));
  232. var myLabel = setLabelStyle(address);
  233. marker.addEventListener("mouseover", function() {
  234. marker.setLabel(myLabel) //鼠标移入maker显示文字标签
  235. });
  236. marker.addEventListener("mouseout", function (e) {
  237. map.removeOverlay(marker.getLabel()) //鼠标移除maker隐藏文字标签
  238. });
  239. map.addOverlay(marker);
  240. }
  241. function setLabelStyle(content) {
  242. //左偏移 右偏移
  243. var offsetSize = new BMap.Size(0, 0);
  244. var labelStyle = {
  245. color: "#fff",
  246. backgroundColor: "#333333",
  247. border: "0",
  248. fontSize : "14px",
  249. width:"200px",
  250. opacity:"0.8",
  251. verticalAlign:"center",
  252. borderRadius: "2px",
  253. whiteSpace:"normal",
  254. wordWrap:"break-word",
  255. padding:"7px",
  256. };
  257. //用于设置样式
  258. var spanA="<span class='angle'><span>";
  259. //不同数字长度需要设置不同的样式。
  260. var num=parseInt(content.length/10)
  261. switch(num) {
  262. case 0:
  263. offsetSize = new BMap.Size(-20, -40);
  264. break;
  265. case 1:
  266. offsetSize = new BMap.Size(-20, -40);
  267. break;
  268. case 2:
  269. offsetSize = new BMap.Size(-20, -60);
  270. break;
  271. case 3:
  272. offsetSize = new BMap.Size(-20, -80);
  273. break;
  274. default:
  275. break;
  276. }
  277. var label = new BMap.Label(content+spanA, {
  278. offset: offsetSize
  279. });
  280. label.setStyle(labelStyle);
  281. return label;
  282. }
  283. var lng = document.getElementById('jing');
  284. var lat = document.getElementById('wei');
  285. var map = new BMap.Map("container");
  286. var point = new BMap.Point(121.130254,31.156433);
  287. var myGeo = new BMap.Geocoder();// 将地址解析结果显示在地图上,并调整地图视野
  288. map.centerAndZoom(point,13);
  289. map.enableScrollWheelZoom();
  290. map.addControl(new BMap.NavigationControl()); //缩放按钮
  291. /* var ac = new BMap.Autocomplete( //建立一个自动完成的对象
  292. {"input" : "suggestId"
  293. ,"location" : map
  294. }); */
  295. //ac.addEventListener("onhighlight", function(e) { //鼠标放在下拉列表上的事件
  296. /* var str = "";
  297. var _value = e.fromitem.value;
  298. var value = "";
  299. if (e.fromitem.index > -1) {
  300. value = _value.province + _value.city + _value.district + _value.street + _value.business;
  301. }
  302. str = "FromItem<br />index = " + e.fromitem.index + "<br />value = " + value;
  303. value = "";
  304. if (e.toitem.index > -1) {
  305. _value = e.toitem.value;
  306. value = _value.province + _value.city + _value.district + _value.street + _value.business;
  307. }
  308. str += "<br />ToItem<br />index = " + e.toitem.index + "<br />value = " + value;
  309. G("searchResultPanel").innerHTML = str; */
  310. //});
  311. var myValue;
  312. /* ac.addEventListener("onconfirm", function(e) { //鼠标点击下拉列表后的事件
  313. lng.value = '';
  314. lat.value = '';
  315. var _value = e.item.value;
  316. myValue = _value.province + _value.city + _value.district + _value.street + _value.business;
  317. setPlace();
  318. }); */
  319. function setPlace(){// 创建地址解析器实例
  320. myGeo.getPoint(myValue, function(point){
  321. if (point) {
  322. lng.value = point.lng;
  323. lat.value = point.lat;
  324. map.centerAndZoom(point, 16);
  325. map.addOverlay(new BMap.Marker(point));
  326. }
  327. }, "上海");
  328. }
  329. /* function onloaded(){
  330. var _grid = $('#detailList');
  331. var tableTd = $('div.datagrid-body td[field="address"]');
  332. tableTd.each(function () {
  333. var $this = $(this);
  334. var index = $this.parent('tr').attr('datagrid-row-index');
  335. var rows = _grid.datagrid('getRows');
  336. var currentRow = rows[index];
  337. var content = '<div style="font-size:16px; max-width:700px;word-break: break-all; word-wrap: break-word;">' + currentRow.address + '</div>';
  338. $this.tips({ content: content, wrapColor: 'black' });
  339. });
  340. } */
  341. </script>