map

index.html

@@ -9,4 +9,8 @@
     <div id="app"></div>
     <script type="module" src="/src/main.js"></script>
   </body>
+  <script
+    type="text/javascript"
+    src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=17ODuchhGW7mcLRYumeQAV3ofrL9Zj3L"
+  ></script>
 </html>

src/components/Contact.vue

@@ -65,7 +65,7 @@
         <p class="email">info@iflytop.com</p>
       </div>
     </div>
-    <div class="contact_form">
+    <!-- <div class="contact_form">
       <p class="title">联系我们</p>
       <div class="input_container mb">
         <input type="text" class="input" />
@@ -94,11 +94,30 @@
       <div class="btn_con">
         <div class="send">发送</div>
       </div>
-    </div>
+    </div> -->
+    <div class="map_container" id="map_container"></div>
   </div>
 </template>
 
-<script setup></script>
+<script setup>
+import { onMounted } from 'vue'
+onMounted(() => {
+  // maps
+  var map = new BMapGL.Map('map_container')
+  var point = new BMapGL.Point(116.311629, 40.088971)
+  map.centerAndZoom(point, 18)
+  map.enableScrollWheelZoom(true)
+  map.setHeading(64.5)
+  map.setTilt(73)
+  var sContent = `<h4 style='margin:0 0 5px 0;'>产品梦工厂</h4>
+    <img style='float:right;margin:0 4px 22px' id='imgDemo' src='/src/static/img/company.jpg' width='139' height='139'/>
+    <p style='margin:0;line-height:1.5;font-size:13px;'>
+      北京市昌平区回龙观街道博纳集团3号楼一层
+    </p></div>`
+  var infoWindow = new BMapGL.InfoWindow(sContent) // 创建信息窗口对象
+  map.openInfoWindow(infoWindow, map.getCenter())
+})
+</script>
 
 <style lang="scss" scoped>
 .contact_container {
@@ -135,6 +154,7 @@
         display: flex;
         flex-direction: column;
         .address {
+          white-space: nowrap;
           font-size: 22px;
           font-family: Alibaba PuHuiTi;
           font-weight: 400;
@@ -166,6 +186,15 @@
       margin-bottom: 74px;
     }
   }
+  .map_container {
+    // flex: 1;
+    width: 791px;
+    height: 546px;
+    margin-left: 191px;
+    border-radius: 8px;
+    overflow: hidden;
+    box-shadow: 0 10px 30px 0 rgba(136, 150, 171, 0.15);
+  }
   .contact_form {
     flex: 1;
     margin-left: 191px;