diff --git a/index.html b/index.html
index c801c4c..8be7069 100644
--- a/index.html
+++ b/index.html
@@ -37,4 +37,9 @@
     <script type="module" src="/src/main.ts"></script>
     <%- devtoolScript %>
   </body>
+  <style type="text/css">
+    .amap-sug-result {
+      z-index: 2999!important;
+    }
+  </style>
 </html>

diff --git a/index.html b/index.html
index c801c4c..8be7069 100644
--- a/index.html
+++ b/index.html
@@ -37,4 +37,9 @@
     <script type="module" src="/src/main.ts"></script>
     <%- devtoolScript %>
   </body>
+  <style type="text/css">
+    .amap-sug-result {
+      z-index: 2999!important;
+    }
+  </style>
 </html>
diff --git a/src/components/SelectLocationMap/map/index.vue b/src/components/SelectLocationMap/map/index.vue
index 35d0061..d751989 100644
--- a/src/components/SelectLocationMap/map/index.vue
+++ b/src/components/SelectLocationMap/map/index.vue
@@ -19,16 +19,20 @@
 // 地图实例
 const map = ref()
 const AMap1 = ref()
+const remarkRef = ref()
+const placeSearchRef = ref()
+const searchList = ref()
 // 地图点击事件
 const clickHandler = function (e) {
   const location = [e.lnglat.getLng(), e.lnglat.getLat()]
   $emit('confirm', location)
   // 在该点添加标记点
-  map.value.clearMap()
+  map.value.remove(remarkRef.value)
   const AMap = AMap1.value
   const marker = new AMap.Marker({
     position: location, // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
   })
+  remarkRef.value = marker
   map.value.add(marker)
 }
 // 初始化地图
@@ -36,7 +40,7 @@
   AMapLoader.load({
     key: '40849e82b4e33f5255b17372520c954d', // 后期需替换
     version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
-    plugins: ['AMap.Scale', 'AMap.MouseTool', 'AMap.ToolBar', 'AMap.PlaceSearch'], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
+    plugins: ['AMap.Scale', 'AMap.MouseTool', 'AMap.ToolBar', 'AMap.PlaceSearch', 'AMap.AutoComplete'], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
   })
     .then((AMap) => {
       AMap1.value = AMap
@@ -52,25 +56,21 @@
         const marker = new AMap.Marker({
           position: $props.init, // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
         })
+        remarkRef.value = marker
         map.value.add(marker)
         map.value.setFitView()
       }
-      // // 创建引入搜索组件
-      // const placeSearch = new AMap.PlaceSearch({
-      //   pageSize: 5, // 单页显示结果条数
-      //   pageIndex: 1, // 页码
-      //   // city: "010", // 兴趣点城市
-      //   citylimit: true, // 是否强制限制在设置的城市内搜索
-      //   map: map.value, // 展现结果的地图实例
-      //   // panel: 'panel', // 结果列表将在此容器中进行展示。
-      //   autoFitView: true, // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围
-      // })
-      // setTimeout(() => {
-      //   placeSearch.search('北京大学', function (status, result) {
-      //     console.log(status, result)
-      //     // 查询成功时，result即对应匹配的POI信息
-      //   })
-      // }, 2000)
+      // 创建引入搜索组件
+      const placeSearch = new AMap.PlaceSearch({
+        pageSize: 5, // 单页显示结果条数
+        pageIndex: 1, // 页码
+        // city: "010", // 兴趣点城市
+        citylimit: false, // 是否强制限制在设置的城市内搜索
+        map: map.value, // 展现结果的地图实例
+        panel: 'info', // 结果列表将在此容器中进行展示。
+        autoFitView: true, // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围
+      })
+      placeSearchRef.value = placeSearch
       // 绑定事件
       map.value.on('click', clickHandler)
     })
@@ -83,15 +83,51 @@
 })
 onBeforeUnmount(() => {
   // 解绑事件
+  map.value.clearMap()
   map.value.off('click', clickHandler)
+  map.value.destroy()
+  map.value = []
+})
+const search = ref('')
+watch(() => search.value, (newVal) => {
+  if (newVal) {
+    placeSearchRef.value.search(newVal)
+  }
+  else {
+    placeSearchRef.value.clear()
+    // map.value.add(remarkRef.value)
+    map.value.setFitView()
+  }
+}, {
+  deep: true,
+  // immediate: true,
 })
 </script>
 
 <template>
-  <div id="map-location" />
+  <div class="box" style="position: relative;">
+    <div id="map-location" style="width: 100%; height: 500px;" />
+    <div class="info">
+      <div class="input-item">
+        <el-input v-model="search" placeholder="请输入关键字" clearable />
+      </div>
+    </div>
+    <div id="info" />
+  </div>
 </template>
 
-<style scoped>
+<style lang="scss" scoped>
+.box {
+  position: relative;
+}
+
+#info {
+  width: 270px;
+  position: absolute;
+  top: 34px;
+  right: 0;
+}
+
 #map {
   overflow: hidden;
   width: 100%;
@@ -99,6 +135,54 @@
   margin: 0;
   font-family: "微软雅黑";
 }
+
+.info {
+  // padding: 0.5rem 0.7rem;
+  margin-bottom: 1rem;
+  border-radius: 0.25rem;
+  position: absolute;
+  top: 0;
+  background-color: #fff;
+  width: auto;
+  min-width: 270px;
+  border-width: 0;
+  right: 0;
+  // box-shadow: 0 2px 6px 0 rgb(240 131 0 / 50%);
+
+  .input-item {
+    position: relative;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    width: 100%;
+    height: 2.2rem;
+    border: 1px solid #ccc;
+    border-radius: 0.2rem;
+
+    .input-item-prepend {
+      margin-right: -1px;
+      width: 35%;
+      font-size: 13px;
+      border-right: 1px solid #666;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      background: #b2cefe;
+
+      span {
+        text-align: center;
+      }
+    }
+
+    input {
+      width: 60%;
+      background: #fff;
+      padding: 0.2rem 0.6rem;
+      margin-left: 0.3rem;
+      border: none;
+    }
+  }
+}
 </style>
 
 <style>
@@ -116,8 +200,4 @@
   border: 0;
   background-color: transparent;
 }
-
-.amap-sug-result {
-  z-index: 9999 !important;
-}
 </style>