地图

liuqimichale
1 parent f1105655
Showing 4 changed files with 122 additions and 18 deletions
src/components/VMap.vue
src/images/content/dialog-address.png
src/images/content/sectionsmall.png
src/style/reset.css
@@ -15,9 +15,9 @@ export default {
   methods:{
     drawMap(){
       let data =  [
-          {Name:'万达停车场1',lonId:'111.742579',latId:'40.818675',status:0,free:30,total:1000},
-          {Name:'万达停车场2',lonId:'111.622579',latId:'40.878675',status:1,free:40,total:800},
-          {Name:'万达停车场333333',lonId:'111.782579',latId:'40.778675',status:2,free:300,total:500}
+          {Name:'万达停车场1',lonId:'111.742579',latId:'40.818675',status:0,freeBrethNum:0,plBerthNum:1000,plName:'万达广场停车场1',plAddress:'北京万达广场1'},
+          {Name:'万达停车场2',lonId:'111.622579',latId:'40.878675',status:1,freeBrethNum:100,plBerthNum:800,plName:'万达广场停车场2',plAddress:'北京万达广场2'},
+          {Name:'万达停车场333333',lonId:'111.782579',latId:'40.778675',status:2,freeBrethNum:300,plBerthNum:500,plName:'万达广场停车场3',plAddress:'北京万达广场3'}
         ];
       var map = new BMap.Map('map', {enableMapClick: false})
       var point = new BMap.Point(data[0].lonId, data[0].latId)
@@ -38,7 +38,7 @@ export default {
           var pt = new BMap.Point(data[item].lonId, data[item].latId);
           points[i] = pt;
           if(data[item].freeBrethNum/data[item].plBerthNum == 0){
-            var myIcon = new BMap.Icon(busyCar,
+            var myIcon = new BMap.Icon(idleCar,
               new BMap.Size(29, 40), {
                 offset: new BMap.Size(10, 40),
                 textColor: '#fff'
@@ -52,7 +52,7 @@ export default {
               });
             var marker = new BMap.Marker(pt,{icon:myIcon});
           } else {
-            var myIcon = new BMap.Icon(idleCar,
+            var myIcon = new BMap.Icon(busyCar,
               new BMap.Size(29, 40), {
                 offset: new BMap.Size(10, 40),
                 textColor: '#fff'
@@ -68,21 +68,37 @@ export default {
           marker.setTop(true,27000000);
           map.addOverlay(marker);
           var myLabel;
+          map.removeOverlay(myLabel);
-          marker.addEventListener("mouseover", (e)=> {
-            map.removeOverlay(myLabel);
-            var that = this;
-            let tmpHtml = '';
-            for(let i=0;i<JSON.parse(data[itemthat].plRate).length;i++){
-              //console.log(data[itemthat].plRate)
-              tmpHtml += "<li>"+JSON.parse(data[itemthat].plRate)[i].standard+"</li>"
+          // map.removeOverlay(myLabel);
+          myLabel = new BMap.Label(
+            `<div class="dialog-wrap">
+                  <div class="dialog-header" title="${data[item].plAddress}">${data[item].plName}</div>
+                  <div class="dialog-address" title="${data[item].plAddress}">${data[item].plAddress}</div>
+                  <ul class="dislog-body">
+                    <li><div>${data[item].freeBrethNum}</div><div>空闲</div></li>
+                    <li></li>
+                    <li><div>${data[item].plBerthNum}</div><div>总数</div></li>
+                  </ul>
+                  <div class="dislog-footer">停车场收入:1293847.00元</div>
+                  <div class="dislog-footer">停车场收入:1293847.00元</div>
+                </div>`,
+            {
+              offset: new BMap.Size(-225, -55),   //label的偏移量，为了让label的中心显示在点上
+              position: pt
+            });
+          myLabel.setStyle({
+              // color: "#0f0",
+              // fontSize: "12px",
+              padding: "0",
+              // whiteSpace: "normal",
+              backgroundColor: "",
+              border: "0px",
+              zIndex: "1000"
             }
-
-
-          });
-          marker.addEventListener("mouseout", function (e) {
-            map.removeOverlay(myLabel);
-          });
+          );
+          marker.setLabel(myLabel)
+          marker.setTop(true,27000000);
           i++;
         })(i);
       }
@@ -99,4 +115,6 @@ export default {
         width: 100%;
         height: 100%;
     }
+
+
 </style>
@@ -130,4 +130,90 @@ table {
 .anchorBL{display:none;}  /*去掉百度地图logo*/
+.dialog-wrap{
+    width:220px;
+    height: 160px;
+    padding:0 15px 15px 15px;
+    background:rgba(3,38,116,.7) url("../images/content/sectionsmall.png") no-repeat;
+    background-size: 100% 100%;
+}
+.dialog-header{
+    width: 220px;
+    height:34px;
+    line-height: 34px;
+    font-size: 14px;
+    font-weight:500;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    color:rgba(255,255,255,.8);
+}
+.dialog-address{
+    height:22px;
+    font-size:12px;
+    padding-left: 20px;
+    font-family:PingFang-SC-Medium;
+    font-weight:500;
+    color:rgba(255,255,255,.4);
+    background: url("../images/content/dialog-address.png") no-repeat 0 3px;
+    background-size: 12px 12px
+}
+.dislog-body{
+    display: flex;
+    height: 50px;
+    background:#2577F5;
+}
+.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:1px;
+    height:31px;
+    margin-top: 9px;
+    background:rgba(5,41,112,.6);
+}
+.dislog-body li:nth-of-type(1) div:nth-of-type(1){
+    height: 25px;
+    line-height: 30px;
+    font-size: 24px;
+    color: #0ECF0E;
+}
+.dislog-body li:nth-of-type(1) div:nth-of-type(2),.dislog-body li:nth-of-type(3) div:nth-of-type(2){
+    height: 25px;
+    line-height: 25px;
+    color:rgba(69,195,243,1)
+}
+
+.dislog-body li:nth-of-type(3) div:nth-of-type(1){
+    height: 25px;
+    line-height: 30px;
+    font-size: 24px;
+    color: #fff;
+}
+.dislog-footer{
+    height:25px;
+    line-height: 25px;
+    font-size:12px;
+    font-family:PingFang-SC-Regular;
+    font-weight:400;
+    color:rgba(7,179,245,1);
+}
+.dislog-footer-main{
+    height:34px ;
+    overflow-y: auto;
+}
+.dislog-footer-main li {
+    font-size:12px;
+    font-family:PingFang-SC-Regular;
+    font-weight:400;
+    color:rgba(7,179,245,1);
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+}
+