引入地图

liuqimichale
1 parent 32e359df
Showing 2 changed files with 17 additions and 0 deletions
index.html
src/views/mapsection.vue
@@ -8,6 +8,7 @@
     <meta name="viewport" content="width=1200">
     <link rel="shortcut icon" type="image/x-icon" href="static/favicon.ico">
     <title>监控</title>
+    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=cuMSxNl5LOY6sf1M3nDGtG6tGXl5a0Bb"></script>
   </head>
   <body>
     <div id="app"></div>
@@ -30,6 +30,7 @@
           </div>
         </li>
       </ul>
+      <div class="allmap" id="allmap"></div>
       <ul class="type-wrap">
         <li>紧张</li>
         <li>正常</li>
@@ -81,17 +82,32 @@ export default {
         bounce:true,//取消达到边界的缓冲效果
       })
     })
+    this.baiduMap()
   },
   methods: {
     currentPark(item, index) {
       console.log(item)
       this.currentIndex = index
+    },
+    baiduMap () {
+      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)              // 将标注添加到地图中
     }
   }
 }
 </script>
 <style lang="scss" scoped>
+  .allmap{
+    position: absolute;
+    top:80px;
+    left: 0;
+    right: 0;
+    bottom: 0;
+  }
   .title-wrap{
     display: flex;
     padding-top: 17px;