baidu map

2 years ago · 7851822ecc
3 changed files with 27 additions and 2 deletions
--- a/index.html
+++ b/index.html
@ -8,5 +8,9 @@
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>
+    <script
+      type="text/javascript"
+      src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=17ODuchhGW7mcLRYumeQAV3ofrL9Zj3L"
+    ></script>
  </body>
 </html>
--- a/src/pages/Contact.vue
+++ b/src/pages/Contact.vue
@ -1,5 +1,6 @@
 <template>
  <div class="contact_container">
+    <SubNavigation title="联系我们" />
    <div class="company_img"></div>
    <div class="contact_info">
      <div class="card">元老师</div>
@ -8,14 +9,34 @@
      <div class="card">公司地址</div>
    </div>
    <div class="map_title">如何找到我们</div>
-    <div class="map_container"></div>
+    <div class="map_container" id="map_container"></div>
  </div>
 </template>

-<script setup></script>
+<script setup>
+import SubNavigation from 'cpns/SubNavigation'
+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 {
+  padding-top: $sub-header-height;
  .company_img {
    width: 100%;
    height: 235px;
--- a/src/static/img/company.jpg
+++ b/src/static/img/company.jpg