diff --git a/src/pages/Map/index.js b/src/pages/Map/index.js
index bad2125..0a9fbe9 100644
--- a/src/pages/Map/index.js
+++ b/src/pages/Map/index.js
@@ -1,18 +1,162 @@
 import React from "react";
-import './index.css'
+// import './index.css'
 import 'react-virtualized/styles.css'
+import NavHeader from "../../components/NavHeader";
+import styles from './index.module.css'
+import axios from "axios";
+import Item from "antd-mobile/es/components/dropdown/item";
+import { type } from "@testing-library/user-event/dist/type";
 
 export default class Map extends React.Component {
+    async renderOverlays(id){
+        const res = await axios.get('http://localhost:8080/area/map?id='+id)
+        const {nextZoom,type} = this.getTypeAndZoom
+        res.data.body.forEach(element => {
+            this.createOverlays(element,nextZoom,type)
+        })
+    }
+    createCircle(element){
+        const {coord:{longitude,latitude},label:areaName,count,value}=element;
+        console.info(longitude,latitude)
+        var label = new window.BMapGL.Label(`
+        <div class="${styles.bubble}">
+            <p class="${styles.name}">${areaName}</p>
+            <p>${count}</p>
+        `, {       // 创建文本标注
+            position: new window.BMapGL.Point(longitude,latitude),                          // 设置标注的地理位置
+            offset: new window.BMapGL.Size(10, 20)           // 设置标注的偏移量
+        })  
+        this.map.addOverlay(label);   
+        label.id=value
+        label.addEventListener('click',()=>{
+            console.log(value)
+            // 放大地图
+            this.map.centerAndZoom(new window.BMapGL.Point(longitude,latitude),nextZoom)
+            // 清除当前覆盖物信息 
+            this.map.clearOverlays()
+        })
+    }
+    createRect(element){
+        const {coord:{longitude,latitude},label:areaName,count,value}=element;
+        console.info(longitude,latitude)
+        var label = new window.BMapGL.Label(`
+        <div class="${styles.bubble}">
+            <p class="${styles.name}">${areaName}</p>
+            <p>${count}</p>
+        `, {       // 创建文本标注
+            position: new window.BMapGL.Point(longitude,latitude),                          // 设置标注的地理位置
+            offset: new window.BMapGL.Size(10, 20)           // 设置标注的偏移量
+        })  
+        this.map.addOverlay(label);   
+        label.id=value
+        label.addEventListener('click',()=>{
+            console.log(value)
+            this.getHousesList(value)
+        })
+    }
+    async getHousesList(id){
+        const res = await axios.get(`http://localhost:8080/houses?cityId=${id}`)
+        
+    }
+    createOverlays(element,nextZoom,type){
+        if(type === 'circle'){
+            this.createCircle(element)
+        }else{
+            this.createRect(element)
+        }
+    }
+    getTypeAndZoom(){
+        const zoom = this.map.getZoom()
+        let nextZoom,type
+        if(zoom>=10&&zoom<12){
+            nextZoom=13
+            type='circle'
+        }else if(zoom>=12&&zoom<14){
+            nextZoom=15
+            type='circle'
+        }else if(zoom>=14&&zoom<16){
+            type='rect'
+        }
+        return {nextZoom,type}
+    }
+
     componentDidMount() {
+        // 获取当前城市
+        const {label,value}=JSON.parse(localStorage.getItem('local_city'))
+        console.log(label,value)
+        // 解析当前坐标
+
+        var myGeo = new window.BMapGL.Geocoder();
+        // 将地址解析结果显示在地图上，并调整地图视野
+        // myGeo.getPoint('北京市海淀区上地10街', function(point){
+        //     if(point){
+        //         map.centerAndZoom(point, 16);
+        //         map.addOverlay(new window.BMapGL.Marker(point, {title: '北京市海淀区上地10街'}))
+        //     }else{
+        //         alert('您选择的地址没有解析到结果！');
+        //     }
+        // }, '北京市')
         var map = new window.BMapGL.Map("container")
+        // 在其他方法中可以使用map
+        this.map = map
+        myGeo.getPoint(label,async point=>{
+            if(point){
+                map.centerAndZoom(point,11)
+               //  map.addOverlay(new window.BMapGL.Marker(point))
+               var scaleCtrl = new window.BMapGL.ScaleControl();  // 添加比例尺控件
+                map.addControl(scaleCtrl);
+                var zoomCtrl = new window.BMapGL.ZoomControl();  // 添加缩放控件
+                map.addControl(zoomCtrl);
+                var cityCtrl = new window.BMapGL.CityListControl();  // 添加城市列表控件
+                map.addControl(cityCtrl);
+                this.renderOverlays(value)
+                // 文本覆盖物
+                // const res = await axios.get('http://localhost:8080/area/map?id='+value)
+                // res.data.body.forEach(element => {
+                //     // 
+                //     const {coord:{longitude,latitude},label:areaName,count,value}=element;
+                //     console.info(longitude,latitude)
+                //     var label = new window.BMapGL.Label(`
+                //     <div class="${styles.bubble}">
+                //         <p class="${styles.name}">${areaName}</p>
+                //         <p>${count}</p>
+                //     `, {       // 创建文本标注
+                //         position: new window.BMapGL.Point(longitude,latitude),                          // 设置标注的地理位置
+                //         offset: new window.BMapGL.Size(10, 20)           // 设置标注的偏移量
+                //     })  
+                //     map.addOverlay(label);   
+                //     label.id=value
+                //     label.addEventListener('click',()=>{
+                //         console.log(value)
+                //         // 放大地图
+                //         map.centerAndZoom(new window.BMapGL.Point(longitude,latitude),13)
+                //         // 清除当前覆盖物信息 
+                //         map.clearOverlays()
+                //     })
+
+                // });
+                // var point = new BMapGL.Point(116.404, 39.915);
+                // var content = "文本覆盖物";
+                // var label = new window.BMapGL.Label(content, {       // 创建文本标注
+                //     position: point,                          // 设置标注的地理位置
+                //     offset: new window.BMapGL.Size(10, 20)           // 设置标注的偏移量
+                // })  
+                // label.setStyle({color:'red'})
+                // map.addOverlay(label);   
+            }
+        },label)
         // 设置中心点
-        var point = new window.BMapGL.Point(116.404, 39.915);
-        map.centerAndZoom(point, 15); 
-        map.enableScrollWheelZoom(true); 
+        // var point = new window.BMapGL.Point(116.404, 39.915);
+        // map.centerAndZoom(point, 15);
+        map.enableScrollWheelZoom(true);
     }
     render() {
-        return(
-            <div id="container">
-            </div>)
+        return (
+            <div className={styles.map}>
+                <NavHeader>地图找房</NavHeader>
+                <div id="container" className={styles.container}>
+                </div>
+            </div>
+        )
     }
 }
\ No newline at end of file