地图覆盖物

liuqimichale
1 parent 1179eb82
Showing 2 changed files with 39 additions and 35 deletions
src/styles/reset.css
src/views/mapsection.vue
@@ -127,4 +127,28 @@ table {
   color:rgba(255,255,255,1);
   background:rgba(68,182,255,.6);
 }
+.dislog-body{
+  display: flex;
+  background:rgba(1,172,254,.2);
+}
+.dislog-body li{
+  text-align: center;
+  color: #fff;
+}
+.dislog-body li:nth-of-type(1),.dislog-body li:nth-of-type(3){
+  flex: 1;
+}
+.dislog-body li:nth-of-type(2){
+  width: 12px;
+}
+.dislog-body li:nth-of-type(1) div:nth-of-type(1){
+  font-size: 14px;
+  color: #32F532;
+}
+.dislog-body li:nth-of-type(3) div:nth-of-type(1){
+  font-size: 14px;
+  color: #fff;
+}
+
+
  
@@ -90,9 +90,9 @@ export default {
     })
     let data = {
       nurseryInfo: [
-        {Name:'万达停车场1',MapPointX:'111.742579',MapPointY:'40.818675',status:0},
-        {Name:'万达停车场2',MapPointX:'111.722579',MapPointY:'40.878675',status:1},
-        {Name:'万达停车场333333',MapPointX:'111.782579',MapPointY:'40.818675',status:2}
+        {Name:'万达停车场1',MapPointX:'111.742579',MapPointY:'40.818675',status:0,free:30,total:1000},
+        {Name:'万达停车场2',MapPointX:'111.722579',MapPointY:'40.878675',status:1,free:40,total:800},
+        {Name:'万达停车场333333',MapPointX:'111.782579',MapPointY:'40.818675',status:2,free:300,total:500}
       ]
     }
     this.baiduMap(data)
@@ -103,9 +103,9 @@ export default {
       this.currentIndex = index
       let data = {
         nurseryInfo: [
-          {Name:'万达停车场1',MapPointX:'111.742579',MapPointY:'40.818675',status:2},
-          {Name:'万达停车场2',MapPointX:'111.722579',MapPointY:'40.878675',status:0},
-          {Name:'万达停车场333333',MapPointX:'111.782579',MapPointY:'40.818675',status:1}
+          {Name:'万达停车场11111',MapPointX:'111.742579',MapPointY:'40.818675',status:2,free:300,total:500},
+          {Name:'万达停车场22222',MapPointX:'111.722579',MapPointY:'40.878675',status:0,free:30,total:1000},
+          {Name:'万达停车场333333',MapPointX:'111.782579',MapPointY:'40.818675',status:1,free:40,total:800}
         ]
       }
       this.baiduMap(data)
@@ -122,6 +122,7 @@ export default {
       var points = [];
       for (var item in data.nurseryInfo) {
         (function (x) {
+          var itemthat = item;
           //创建标注
           var pt = new BMap.Point(data.nurseryInfo[item].MapPointX, data.nurseryInfo[item].MapPointY);
           points[i] = pt;
@@ -150,56 +151,35 @@ export default {
           console.log(data)
           map.addOverlay(marker);
           var myLabel;
+
           marker.addEventListener("mouseover", function (e) {
             console.log(e)
               myLabel = new BMap.Label(
                 `<div class="dislog-wrap">
-                  <div class="dialog-header" title="${data.nurseryInfo[item].Name}">${data.nurseryInfo[item].Name}</div>
+                  <div class="dialog-header" title="${data.nurseryInfo[itemthat].Name}">${data.nurseryInfo[itemthat].Name}</div>
                   <ul class="dislog-body">
+                    <li><div>${data.nurseryInfo[itemthat].free}</div><div>空闲</div></li>
+                    <li><div>/</div><div></div></li>
+                    <li><div>${data.nurseryInfo[itemthat].total}</div><div>总数</div></li>
                   </ul>
                 </div>`,
               {
-                offset: new BMap.Size(30, -85),   //label的偏移量，为了让label的中心显示在点上
+                offset: new BMap.Size(25, -35),   //label的偏移量，为了让label的中心显示在点上
                 position: pt
               });
  
             myLabel.setStyle({
                 // color: "#0f0",
                 // fontSize: "12px",
-                padding: "0px",
+                padding: "0",
                 // whiteSpace: "normal",
-                // backgroundColor: "#f00",
+                backgroundColor: "",
                 border: "0px",
                 // zIndex: "1000"
               }
             );
-            console.log('1')
             map.addOverlay(myLabel);
           });
-          // marker.addEventListener("mouseout", function () {
-          //   map.removeOverlay(myLabel);
-          // })
-
-          // //创建信息窗口
-          // var opts = {
-          //   width: 400,     // 信息窗口宽度
-          //   height: 120,     // 信息窗口高度
-          //   title: "<strong style=\"font-size:16px;font-weight:bold\">" + data.nurseryInfo[item].Name + "</strong>", // 信息窗口标题
-          //   enableMessage: true, //设置允许信息窗发送短息
-          //   message: ""
-          // }
-          // var showInfo = "地址：" + data.nurseryInfo[item].Addresss + "<br/>" + "描述：" + data.nurseryInfo[item].BasicFacts + "<br/>面积：" + data.nurseryInfo[item].HouseArea + "<br/>地块个数:" + data.nurseryInfo[item].nurseryBlockCount;
-          // var infoWindow = new BMap.InfoWindow(showInfo, opts);  // 创建信息窗口对象
-          // marker.addEventListener("mouseover", function (e) {
-          //   console.log('1')
-          //   //map.centerAndZoom(pt, 12);
-          //   marker.openInfoWindow(infoWindow, pt); //开启信息窗口
-          // });
-          // marker.addEventListener("mouseout", function () {
-          //   marker.closeInfoWindow();
-          // })
-          // console.log('1')
-          // map.addOverlay(marker);
           i++;
         })(i);
       }