admin

12_vuecli/mediaapp/src/views/mine/MineAddress.vue

@@ -1,24 +1,83 @@
 <template>
-    <div class="mine-address">
-        <baidu-map class="bm-view" center="北京">
-            <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
-        </baidu-map>
+  <div class="mine-address">
+    <div class="nav-content">
+      <van-nav-bar
+        title="我的地址"
+        left-text="返回"
+        left-arrow
+        @click-left="$router.go(-1)"
+      />
     </div>
+    <div class="address-info">
+      <van-cell
+        center
+        size="large"
+        label="详细信息"
+        title="地址"
+        icon="location-o"
+      >
+        <!-- 使用 right-icon 插槽来自定义右侧图标 -->
+        <template #right-icon>
+          <van-icon name="edit" size=".6rem" class="search-icon" />
+        </template>
+      </van-cell>
+    </div>
+    <baidu-map
+      class="bm-view"
+      :center="{ lng: 116.404, lat: 39.915 }"
+      :zoom="15"
+    >
+      <bm-marker
+        :position="{ lng: 116.404, lat: 39.915 }"
+        :dragging="true"
+        animation="BMAP_ANIMATION_BOUNCE"
+      >
+      </bm-marker>
+    </baidu-map>
+  </div>
 </template>
 <style scoped>
-    .bm-view{
-        width: 100vw;
-        height: 100vw;
-    }
+.nav-content {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  z-index: 1000;
+}
+.bm-view {
+  width: 100vw;
+  height: 100vw;
+}
 </style>
 <script>
-import Vue from 'vue'
-import BaiduMap from 'vue-baidu-map'
+import Vue from "vue";
+import BaiduMap from "vue-baidu-map";
+import axios from "axios";
 
 Vue.use(BaiduMap, {
-  ak: 'kMxu1YB2Og3q1S2UgcDbONFArPPbgd9I'
-})
+  ak: "kMxu1YB2Og3q1S2UgcDbONFArPPbgd9I",
+});
 export default {
-    
-}
+    methods: {
+      getAddress(){
+        axios.get("/map/search",{
+            params:{
+                output:"json",
+                query:"黑龙江大学",
+                region:"哈尔滨",
+                ak:"kMxu1YB2Og3q1S2UgcDbONFArPPbgd9I"
+            }
+        }).then(res=>{
+            console.log(res)
+        })
+      }  
+    },
+  created() {
+    this.$emit("changeNav", false);
+    this.getAddress();
+  },
+  beforeDestroy() {
+    this.$emit("changeNav", true);
+  },
+};
 </script>

12_vuecli/mediaapp/vue.config.js

@@ -22,6 +22,13 @@ module.exports = defineConfig({
         pathRewrite:{
           '^/doubao':''
         }
+      },
+      '/map':{
+        target:'https://api.map.baidu.com/place/v2',
+        changeOrigin:true,
+        pathRewrite:{
+          '^/map':''
+        }
       }
     },
     compress: false