diff --git a/public/index.html b/public/index.html
index e362da4..cd88591 100644
--- a/public/index.html
+++ b/public/index.html
@@ -12,7 +12,7 @@
         securityJsCode: '68787c7a64e7240670e6a538b326d64b',
       }
     </script>
-    <script type="text/javascript" src='https://webapi.amap.com/maps?v=1.4.11&key=1a9ee0079fcb3c6c64c96dc903989994&plugin=AMap.PlaceSearch'></script>
+    <script type="text/javascript" src='https://webapi.amap.com/maps?v=1.4.4&key=1a9ee0079fcb3c6c64c96dc903989994&plugin=AMap.PlaceSearch,AMap.DistrictSearch'></script>
     <script src="https://webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script>
   </head>
   <body>
diff --git a/src/assets/female.png b/src/assets/female.png
new file mode 100644
index 0000000..6d60fb4
Binary files /dev/null and b/src/assets/female.png differ
diff --git a/src/assets/male.png b/src/assets/male.png
new file mode 100644
index 0000000..02bdec2
Binary files /dev/null and b/src/assets/male.png differ
diff --git a/src/main.js b/src/main.js
index 91c9fd7..b283a1e 100644
--- a/src/main.js
+++ b/src/main.js
@@ -50,10 +50,9 @@ Vue.use(avue)
 import VueAMap from "vue-amap";
 VueAMap.initAMapApiLoader({
   key:'1a9ee0079fcb3c6c64c96dc903989994',
-  plugins:[
-    'AMap.MarkerClusterer'
-  ],
-  v: "1.4.4"
+  plugins:['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor','MarkerClusterer','AMap.DistrictSearch'],
+  v: "1.4.4",
+  'uVersion':'1.0'
 })
 Vue.use(VueAMap)
 
diff --git a/src/views/customer/map.vue b/src/views/customer/map.vue
index cdb9520..1af08cc 100644
--- a/src/views/customer/map.vue
+++ b/src/views/customer/map.vue
@@ -6,6 +6,10 @@
           <div slot="content"></div>
 
           <slot>
+            <el-select v-model="selectArea" size="small" placeholder="请选择区域" @change="areaClick">
+              <el-option v-for="item in areas" :key="item.id" value-key="id" :value="item" :label="item.value">
+              </el-option>
+            </el-select>
 <!--            <Input placeholder="关键字搜索" v-model="selector.keyword" style="width: 200px; margin-right: 10px" />-->
 
 <!--            <Button style="margin-left: 10px" type="primary" @click="selector.page = 1,getCustomers()">查询</Button>-->
@@ -34,7 +38,10 @@
          </div>
          <div>
            <i class="el-icon-location" style="padding-right: 10px;"></i>
-           {{ select.address }}
+           {{ select.info.city_detail ? select.info.city_detail.value : '' }} {{ select.info.area_detail ? select.info.area_detail.value : '' }} {{ select.info.street_detail ? select.info.street_detail.value : '' }}
+           <div>
+             {{ select.address }}
+           </div>
          </div>
        </div>
      </el-card>
@@ -42,6 +49,7 @@
 </template>
 
 <script>
+import { getparameter } from '@/api/system/dictionary'
 import { AMapManager,lazyAMapApiLoaderInstance } from 'vue-amap'
 import { getList } from '@/api/customer'
 
@@ -49,14 +57,20 @@ const amapManager = new AMapManager()
 export default {
   data() {
     return {
+      selectArea:{},
       selector: {
         page: 1,
         page_size: 9999,
-        keyword: ''
+        keyword: '',
+        area_id:''
       },
       height:0,
       amapManager,
+      district:'',
       customers:[],
+      markers:[],
+      polygons:[],
+      areas:[],
 
       isShowCard:false,
       select:'',
@@ -64,6 +78,50 @@ export default {
     }
   },
   methods: {
+    async getAreas(){
+      let res = await getparameter({number:'serveArea'})
+      this.areas = res.detail
+      console.log(this.areas)
+    },
+
+    async areaClick(e){
+      this.selector.area_id = e.id
+      await this.getCustomers()
+      this.draw()
+    },
+
+    initDistrict(){
+      if(!this.district){
+        let opts = {
+          subdistrict: 0, //获取边界不需要返回下级行政区
+          extensions: "all", //返回行政区边界坐标组等具体信息
+          level: "district", //查询行政级别为 市
+        }
+        this.district = new AMap.DistrictSearch(opts)
+      }
+    },
+    drawPolygon(district = '常州市'){
+      this.district.search(district,(status,res) => {
+        console.log(res,status)
+        if(res.districtList){
+          this.polygons = []
+          let bounds = res.districtList[0].boundaries
+          for(let i = 0,l = bounds.length; i < l; i++){
+            let polygon = new AMap.Polygon({
+              strokeWeight: 1,
+              path: bounds[i],
+              fillOpacity: 0.4,
+              fillColor: "rgba(225,121,110,0.92)",
+              strokeColor: "#a53227",
+            })
+            this.polygons.push(polygon)
+          }
+          this.map.add(this.polygons)
+          this.map.setFitView(this.polygons)
+        }
+      })
+    },
+
     initLoad() {
       let clientHeight = document.documentElement.clientHeight
       let lxHeader_height = 96.5; //查询 头部
@@ -88,14 +146,15 @@ export default {
       console.log(this.customers)
     },
 
-    markers(){
+    drawMarkers(){
+      this.markers = []
       for(let i of this.customers){
         let marker = new AMap.Marker({
           draggable:false,
           cursor:'pointer',
           position:[i.lng,i.lat],
-          icon:require('../../assets/customer.png'),
-          label: {content:i.name,offset:new AMap.Pixel(0,34)},
+          icon:i.info.sex === '女' ?  require('../../assets/female.png') : require('../../assets/male.png'),
+          label: {content:i.name,offset:new AMap.Pixel(0,30)},
           clickable:true,
         })
         marker.on('mouseover',(e) => {
@@ -107,26 +166,40 @@ export default {
         marker.on('mouseout',e => {
           this.isShowCard = false
         })
+        this.markers.push(marker)
         marker.setMap(this.map)
       }
-    }
+    },
+
+    draw(){
+      this.map.remove(this.polygons)
+      this.map.remove(this.markers)
+      this.drawMarkers()
+      this.drawPolygon(this.selectArea.remark || '常州市')
+    },
   },
+
   async mounted() {
     await this.getCustomers()
     lazyAMapApiLoaderInstance.load().then(() => {
       this.map = new AMap.Map('amapContainer',{
         center:[Number(this.customers[0]?.lng || 119.58),Number(this.customers[0]?.lat || 31.47)]
       })
-      this.markers()
+      this.initDistrict()
+      this.draw()
     })
   },
   created() {
     this.initLoad()
+    this.getAreas()
   }
 }
 </script>
 
 <style scoped lang="scss">
+::v-deep .amap-icon img{
+  height: 24px;
+}
 ::v-deep .el-card__body{
   padding: 10px !important;
 }
