map

liuqimichale
1 parent a3e443aa
Showing 5 changed files with 94 additions and 3 deletions
src/components/VMap.vue
src/images/content/busy-status.png
src/images/content/idle-status.png
src/images/content/normal-status.png
src/style/reset.css
 <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>
@@ -128,4 +128,6 @@ table {
     position: absolute;
 }
+.anchorBL{display:none;}  /*去掉百度地图logo*/
+