引入地图

liuqimichale
1 parent f16dcfc1
Showing 7 changed files with 52 additions and 2 deletions
src/assets/img/busy-status.png
src/assets/img/idle-status.png
src/assets/img/normal-status.png
src/views/busy-status.png
src/views/idle-status.png
src/views/mapsection.vue
src/views/normal-status.png
@@ -47,6 +47,7 @@
 <script>
 import BScroll from 'better-scroll'
+import iconCar from '../assets/img/busy-status.png'; //以import的方式导入图片文件
 export default {
   name: 'mapsection',
@@ -93,8 +94,57 @@ export default {
       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)              // 将标注添加到地图中
+      // 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 = [];
+      for (var item in data.nurseryInfo) {
+        (function (x) {
+          //创建标注
+          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});
+          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 opts = {
+          //   width: 400,     // 信息窗口宽度
+          //   height: 120,     // 信息窗口高度
+          //   title: "<strong style=\"font-size:16px;font-weight:bold\">" + data.nurseryInfo[item].Name + "</strong>", // 信息窗口标题
+          //   enableMessage: true, //设置允许信息窗发送短息
+          //   message: ""
+          // }
+          // 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) {
+          //   //map.centerAndZoom(pt, 12);
+          //   marker.openInfoWindow(infoWindow, pt); //开启信息窗口
+          // });
+          // map.addOverlay(marker);
+          // i++;
+        })(i);
+      }
+
     }
   }
 }