drawMap.js 3.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899
  1. /**
  2. * 地图渲染高亮区域
  3. * 大屏
  4. */
  5. var mapData = [
  6. {
  7. "name":"西部区域",
  8. "peopleNum":80,
  9. "chargeName":"张三",
  10. "timely ":"80%",
  11. "complete":"98%",
  12. "lng":116.30357809450051,
  13. "lat":39.90696803762701
  14. },{
  15. "name":"东部区域",
  16. "peopleNum":102,
  17. "chargeName":"李四",
  18. "timely ":"90%",
  19. "complete":"92%",
  20. "lng":116.45429678343832,
  21. "lat":39.91039161216257
  22. },{
  23. "name":"中部区域",
  24. "peopleNum":110,
  25. "chargeName":"王五",
  26. "timely ":"86%",
  27. "complete":"96%",
  28. "lng":116.39198370361552,
  29. "lat":39.914999999999985
  30. },{
  31. "name":"南部区域",
  32. "peopleNum":76,
  33. "chargeName":"赵四",
  34. "timely ":"88%",
  35. "complete":"92%",
  36. "lng":116.39318533325387,
  37. "lat":39.8459734273028
  38. },{
  39. "name":"北部区域",
  40. "peopleNum":102,
  41. "chargeName":"王二",
  42. "timely ":"92%",
  43. "complete":"96%",
  44. "lng":116.39267034912311,
  45. "lat":39.9697285689225
  46. }
  47. ];
  48. //
  49. //
  50. //
  51. function drawMap(result,map) {
  52. var overlays = [];
  53. result.forEach(function (item,index) {
  54. if(item["lng"] && item["lat"]){
  55. var point = new BMap.Point(item["lng"],item["lat"]);
  56. var marker = new BMap.Marker(point,{"data":item,"style":"highlightIcon","selectedStyle":"selectIcon"});
  57. overlays.push(marker);
  58. }
  59. });
  60. map.addOverlays(overlays,function (event) {
  61. overlays.forEach(function (item,index) {
  62. map.changeOverlayStyle(item,"highlightIcon");
  63. });
  64. var clickOverlay = map.getOverlayByEvent(event);
  65. map.changeOverlayStyle(clickOverlay,"selectIcon");
  66. //信息窗口
  67. var infoWindowPoint = clickOverlay.point;
  68. // map.setCenter(infoWindowPoint);
  69. var infoHtml =
  70. '<div class="info-container">' +
  71. '<div class="info-container-title">' +
  72. '<span>'+clickOverlay["data"]["NAME"]+'</span>' +
  73. '</div>' +
  74. '<div class="info-container-people">' +
  75. '<span>人员总数:</span><span>'+clickOverlay["data"]["PEOPLENUM"]+'</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span>负责人:</span><span>'+clickOverlay["data"]["CHARGENAME"]+'</span>'+
  76. '</div>' +
  77. '<div class="info-container-speed">' +
  78. '<div class="info-container-speed-content">' +
  79. '<span class="info-container-speed-content-inside-1"></span>'+
  80. '<span class="info-container-speed-content-inside-1-num">'+clickOverlay["data"]["TIMELY"]+'</span>'+
  81. '</div>' +
  82. '<div class="info-container-speed-content">' +
  83. '<span class="info-container-speed-content-inside-2"></span>'+
  84. '<span class="info-container-speed-content-inside-2-num">'+clickOverlay["data"]["COMPLETE"]+'</span>'+
  85. '</div>' +
  86. '</div>' +
  87. '</div>';
  88. var infoWindow=new BMap.InfoWindow(infoHtml);
  89. map.openInfoWindow(infoWindow,infoWindowPoint);
  90. $(".info-container-speed-content-inside-1").animate({
  91. width:clickOverlay["data"]["TIMELY"]
  92. },2000);
  93. $(".info-container-speed-content-inside-2").animate({
  94. width:clickOverlay["data"]["COMPLETE"]
  95. },2000);
  96. });
  97. }