地图覆盖物

liuqimichale
1 parent b850acb7
Showing 2 changed files with 32 additions and 12 deletions
src/styles/reset.css
src/views/mapsection.vue
@@ -109,7 +109,22 @@ table {
   position: absolute;
 }
  
-.parkpop-content{
-  color: #f00;
+.dislog-wrap{
+  width:84px;
+  height: 47px;
+  border-radius:2px;
+}
+.dialog-header{
+  width: 84px;
+  height:14px;
+  line-height: 14px;
+  font-size: 12px;
+  font-weight:400;
+  text-align: center;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  color:rgba(255,255,255,1);
+  background:rgba(68,182,255,.6);
 }
  
@@ -90,9 +90,9 @@ export default {
     })
     let data = {
       nurseryInfo: [
-        {MapPointX:'111.742579',MapPointY:'40.818675',status:0},
-        {MapPointX:'111.722579',MapPointY:'40.878675',status:1},
-        {MapPointX:'111.782579',MapPointY:'40.818675',status:2}
+        {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}
       ]
     }
     this.baiduMap(data)
@@ -105,7 +105,7 @@ export default {
         nurseryInfo: [
           {Name:'万达停车场1',MapPointX:'111.742579',MapPointY:'40.818675',status:2},
           {Name:'万达停车场2',MapPointX:'111.722579',MapPointY:'40.878675',status:0},
-          {Name:'万达停车场3',MapPointX:'111.782579',MapPointY:'40.818675',status:1}
+          {Name:'万达停车场333333',MapPointX:'111.782579',MapPointY:'40.818675',status:1}
         ]
       }
       this.baiduMap(data)
@@ -147,24 +147,29 @@ export default {
               });
             var marker = new BMap.Marker(pt,{icon:myIcon});
           }
-
+          console.log(data)
           map.addOverlay(marker);
           var myLabel;
           marker.addEventListener("mouseover", function (e) {
+            console.log(e)
               myLabel = new BMap.Label(
-              '<div class="parkpop-content" style="font-size: 20px;">12321312</div>',
+                `<div class="dislog-wrap">
+                  <div class="dialog-header" title="${data.nurseryInfo[item].Name}">${data.nurseryInfo[item].Name}</div>
+                  <ul class="dislog-body">
+                  </ul>
+                </div>`,
               {
                 offset: new BMap.Size(30, -85),   //label的偏移量，为了让label的中心显示在点上
-                position: point
+                position: pt
               });
  
             myLabel.setStyle({
                 // color: "#0f0",
-                fontSize: "12px",
-                // padding: "5px",
+                // fontSize: "12px",
+                padding: "0px",
                 // whiteSpace: "normal",
                 // backgroundColor: "#f00",
-                // border: "0px",
+                border: "0px",
                 // zIndex: "1000"
               }
             );