地图覆盖物

liuqimichale
1 parent c421e638
Showing 4 changed files with 87 additions and 26 deletions
src/views/busy-status.png
src/views/idle-status.png
src/views/mapsection.vue
src/views/normal-status.png
@@ -47,7 +47,9 @@
 <script>
 import BScroll from 'better-scroll'
-import iconCar from '../assets/img/busy-status.png'; //以import的方式导入图片文件
+import busyCar from '../assets/img/busy-status.png'; //以import的方式导入图片文件
+import normalCar from '../assets/img/normal-status.png'; //以import的方式导入图片文件
+import idleCar from '../assets/img/idle-status.png'; //以import的方式导入图片文件
 export default {
   name: 'mapsection',
@@ -83,26 +85,35 @@ export default {
         bounce:true,//取消达到边界的缓冲效果
       })
     })
-    this.baiduMap()
+    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}
+      ]
+    }
+    this.baiduMap(data)
   },
   methods: {
     currentPark(item, index) {
       console.log(item)
       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:'万达停车场3',MapPointX:'111.782579',MapPointY:'40.818675',status:1}
+        ]
+      }
+      this.baiduMap(data)
     },
-    baiduMap () {
+    baiduMap (data) {
       var map = new BMap.Map('allmap')
       var point = new BMap.Point(111.742579, 40.818675)
       map.centerAndZoom(point, 12)
       // var marker = new BMap.Marker(point)  // 创建标注
       // map.addOverlay(marker)              // 将标注添加到地图中
-      let data = {
-        nurseryInfo: [
-          {MapPointX:'111.742579',MapPointY:'40.818675'},
-          {MapPointX:'111.722579',MapPointY:'40.818675'},
-          {MapPointX:'111.732579',MapPointY:'40.818675'}
-        ]
-      }
+
       map.clearOverlays();
       var i = 0;
       var points = [];
@@ -111,21 +122,63 @@ export default {
           //创建标注
           var pt = new BMap.Point(data.nurseryInfo[item].MapPointX, data.nurseryInfo[item].MapPointY);
           points[i] = pt;
-          var myIcon = new BMap.Icon(iconCar,
-            new BMap.Size(29, 40), {
-              offset: new BMap.Size(10, 40),
-              textColor: '#fff'
-            });
-          var marker = new BMap.Marker(pt,{icon:myIcon});
+          if(data.nurseryInfo[item].status === 0){
+            var myIcon = new BMap.Icon(busyCar,
+              new BMap.Size(29, 40), {
+                offset: new BMap.Size(10, 40),
+                textColor: '#fff'
+              });
+            var marker = new BMap.Marker(pt,{icon:myIcon});
+          } else if(data.nurseryInfo[item].status === 1){
+            var myIcon = new BMap.Icon(normalCar,
+              new BMap.Size(29, 40), {
+                offset: new BMap.Size(10, 40),
+                textColor: '#fff'
+              });
+            var marker = new BMap.Marker(pt,{icon:myIcon});
+          } else {
+            var myIcon = new BMap.Icon(idleCar,
+              new BMap.Size(29, 40), {
+                offset: new BMap.Size(10, 40),
+                textColor: '#fff'
+              });
+            var marker = new BMap.Marker(pt,{icon:myIcon});
+          }
+
           map.addOverlay(marker);
-          // var label = new BMap.Label(data.nurseryInfo[item].Name, { offset: new BMap.Size(30, -10) });
-          // marker.setLabel(label);
-          // label.setStyle({
-          //   color: "White",
-          //   fontSize: "14px",
-          //   backgroundColor: "#5CACEE",
-          //   border: "0"
-          // });
+          var myLabel;
+          marker.addEventListener("mouseover", function (e) {
+              myLabel = new BMap.Label(
+              '<div class="parkpop-content"> ' +
+              '<div class="parkpop-tit">112321312312</div> ' +
+              '<div class="parkpop-cont"> ' +
+              '<div class="parkpop-freecont"> ' +
+
+              '<div class="allspace-tit">总车位</div> ' +
+              '</div> ' +
+              '</div></div>',
+              {
+                offset: new BMap.Size(30, -85),   //label的偏移量，为了让label的中心显示在点上
+                position: point
+              });
+
+            myLabel.setStyle({
+                color: "#F0F0F0",
+                fontSize: "12px",
+                padding: "5px",
+                whiteSpace: "normal",
+                backgroundColor: "#f00",
+                border: "0px",
+                zIndex: "1000"
+              }
+            );
+            console.log('1')
+            map.addOverlay(myLabel);
+          });
+          marker.addEventListener("mouseout", function () {
+            map.removeOverlay(myLabel);
+          })
+
           // //创建信息窗口
           // var opts = {
           //   width: 400,     // 信息窗口宽度
@@ -136,12 +189,17 @@ export default {
           // }
           // 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("click", function (e) {
+          // 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++;
         })(i);
       }
@@ -158,6 +216,9 @@ export default {
     right: 0;
     bottom: 0;
   }
+  .parkpop-tit{
+    color: #000;
+  }
   .title-wrap{
     display: flex;
     padding-top: 17px;