map.js 4.9 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586
  1. /*大屏*/
  2. (function () {
  3. 'use strict';
  4. var map = new BMap.Map("allmap"); // 创建Map实例
  5. map.centerAndZoom(new BMap.Point(123.432790922, 41.8086447835), 10); // 初始化地图,设置中心点坐标和地图级别
  6. map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
  7. map.setMapStyle(
  8. {
  9. style:"light"
  10. }
  11. );
  12. getInfo();
  13. function getInfo() {
  14. var imgname='farm';
  15. $.ajax({
  16. url:"./json/package.json",
  17. type:'get',
  18. dataType:'json',
  19. async:true,
  20. success:function(data)
  21. {
  22. var online = 0;
  23. for (var i = 0; i < data.length; i++) {
  24. (function (x) {
  25. var point = new BMap.Point(data[i].lng,data[i].lat); // 创建点坐标
  26. var myIcon = new BMap.Icon("/demo/img/"+data[i].sfzx+".png", new BMap.Size(32, 32), {
  27. offset: new BMap.Size(10, 25), // 指定定位位置
  28. imageOffset: new BMap.Size(0,0) // 设置图片偏移
  29. });
  30. var marker = new BMap.Marker(point,{icon:myIcon});
  31. var info = '<div style="width: 200px;height: 160px;background-color: rgba(13, 33, 70, 0.8);border: 1px solid #155596; padding: 12px 0 20px 35px;box-sizing: border-box; position: relative; border-bottom: none;">\n' +
  32. ' <div style="text-align:left; margin-bottom: 2px;">\n' +
  33. ' <span style="font-size: 16px; color: #52d2ff;margin-right: 6px;" >行政区:</span>\n' +
  34. ' <span style="font-size: 14px; color: #fff;">黑三县</span>\n' +
  35. ' </div>' +
  36. ' <div style="text-align: left;margin-bottom: 2px;">\n' +
  37. ' <span style="font-size: 16px; color: #52d2ff;margin-right: 6px;" >观测作物:</span>\n' +
  38. ' <span style="font-size: 14px; color: #fff;">西红柿</span>\n' +
  39. ' </div>' +
  40. ' <div style="text-align: left;margin-bottom: 2px;">\n' +
  41. ' <span style="font-size: 16px; color: #52d2ff;margin-right: 6px;" >站号:</span>\n' +
  42. ' <span style="font-size: 14px; color: #fff;">LOO33</span>\n' +
  43. ' </div>' +
  44. ' <div style="text-align: left;margin-bottom: 2px;">\n' +
  45. ' <span style="font-size: 16px; color: #52d2ff;margin-right: 6px;" >站名:</span>\n' +
  46. ' <span style="font-size: 14px; color: #fff;">西红柿观测站</span>\n' +
  47. ' </div>' +
  48. ' <div style="text-align: left;margin-bottom: 2px;">\n' +
  49. ' <span style="font-size: 16px; color: #52d2ff;margin-right: 6px;" >主板电压:</span>\n' +
  50. ' <span style="font-size: 14px; color: #fff;">21.0V</span>\n' +
  51. ' </div>' +
  52. ' <div style="text-align: left;margin-bottom: 2px;">\n' +
  53. ' <span style="font-size: 16px; color: #52d2ff;margin-right: 6px;" >主板温度:</span>\n' +
  54. ' <span style="font-size: 14px; color: #fff;">12.2℃</span>\n' +
  55. ' </div>\n' +
  56. ' <img src="./img/jiantou.png" alt="" style="display: blolk;position: absolute;bottom: -13px ;right: 0;">\n' +
  57. ' </div>';
  58. var infoBox = new BMapLib.InfoBox(map, info, {
  59. closeIconMargin: "10 10 0 0",
  60. closeIconUrl: "./img/jiantou.png",
  61. enableAutoPan: true,
  62. align: INFOBOX_AT_TOP,
  63. position :1,
  64. offset : new BMap.Size(-5, 30)
  65. });
  66. infoBox.open(marker);
  67. infoBox.hide();
  68. marker.addEventListener("mouseover", function () {
  69. infoBox.show(marker);
  70. });
  71. marker.addEventListener("mouseout", function () {
  72. infoBox.hide(marker);
  73. });
  74. map.addOverlay(marker);
  75. })(i);
  76. }
  77. },
  78. error:function()
  79. {
  80. alert('网络故障,请联系管理员!');
  81. }
  82. });
  83. }
  84. })()