From f11056559d409b900cee3564724b1e3709758f51 Mon Sep 17 00:00:00 2001
From: liuqimichale <123456lq>
Date: Wed, 13 Mar 2019 11:12:38 +0800
Subject: [PATCH] map

---
 src/components/VMap.vue              | 95 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++---
 src/images/content/busy-status.png   | Bin 0 -> 1081 bytes
 src/images/content/idle-status.png   | Bin 0 -> 1233 bytes
 src/images/content/normal-status.png | Bin 0 -> 1201 bytes
 src/style/reset.css                  |  2 ++
 5 files changed, 94 insertions(+), 3 deletions(-)
 create mode 100644 src/images/content/busy-status.png
 create mode 100644 src/images/content/idle-status.png
 create mode 100644 src/images/content/normal-status.png

diff --git a/src/components/VMap.vue b/src/components/VMap.vue
index 7f5de9b..9e94165 100644
--- a/src/components/VMap.vue
+++ b/src/components/VMap.vue
@@ -1,13 +1,102 @@
 <template>
-    <div>地图</div>
+    <div class="map-wrap" id="map"></div>
 </template>
 
 <script>
+import busyCar from '../images/content/busy-status.png'; //以import的方式导入图片文件
+import normalCar from '../images/content/normal-status.png'; //以import的方式导入图片文件
+import idleCar from '../images/content/idle-status.png'; //以import的方式导入图片文件
+
 export default {
-  name: 'VMap'
+  name: 'VMap',
+  mounted(){
+    this.drawMap()
+  },
+  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}
+        ];
+      var map = new BMap.Map('map', {enableMapClick: false})
+      var point = new BMap.Point(data[0].lonId, data[0].latId)
+      map.centerAndZoom(point, 15)
+      var mapStyle={  style : "midnight" }
+      map.enableScrollWheelZoom(false);
+      map.setMapStyle(mapStyle);
+      // var marker = new BMap.Marker(point)  // 创建标注
+      // map.addOverlay(marker)              // 将标注添加到地图中
+
+      map.clearOverlays();
+      var i = 0;
+      var points = [];
+      for (var item in data) {
+        (function (x) {
+          var itemthat = item;
+          //创建标注
+          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,
+              new BMap.Size(29, 40), {
+                offset: new BMap.Size(10, 40),
+                textColor: '#fff'
+              });
+            var marker = new BMap.Marker(pt,{icon:myIcon});
+          } else if(data[item].freeBrethNum/data[item].plBerthNum <= 0.3){
+            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});
+          }
+          var myIcon = new BMap.Icon(busyCar,
+            new BMap.Size(29, 40), {
+              offset: new BMap.Size(10, 40),
+              textColor: '#fff'
+            });
+
+          marker.setTop(true,27000000);
+          map.addOverlay(marker);
+          var 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>"
+            }
+
+
+          });
+          marker.addEventListener("mouseout", function (e) {
+            map.removeOverlay(myLabel);
+          });
+          i++;
+        })(i);
+      }
+
+    }
+
+  }
+
 }
 </script>
 
 <style scoped lang="scss">
-
+    .map-wrap{
+        width: 100%;
+        height: 100%;
+    }
 </style>
diff --git a/src/images/content/busy-status.png b/src/images/content/busy-status.png
new file mode 100644
index 0000000..39d2eed
Binary files /dev/null and b/src/images/content/busy-status.png differ
diff --git a/src/images/content/idle-status.png b/src/images/content/idle-status.png
new file mode 100644
index 0000000..b37463e
Binary files /dev/null and b/src/images/content/idle-status.png differ
diff --git a/src/images/content/normal-status.png b/src/images/content/normal-status.png
new file mode 100644
index 0000000..4186189
Binary files /dev/null and b/src/images/content/normal-status.png differ
diff --git a/src/style/reset.css b/src/style/reset.css
index 2eeb531..760faa2 100644
--- a/src/style/reset.css
+++ b/src/style/reset.css
@@ -128,4 +128,6 @@ table {
     position: absolute;
 }
 
+.anchorBL{display:none;}  /*去掉百度地图logo*/
+
 
--
libgit2 0.21.4