diff --git a/pages.json b/pages.json
index dc57f33e562713342dbcd7e129685697f48bee2b..508a72b79b762e28aa5d68a0a0d33af49e7a3e39 100644
--- a/pages.json
+++ b/pages.json
@@ -905,13 +905,6 @@
       }
     },
     // #ifdef WEB
-    {
-      "path" : "pages/API/map/map",
-      "style" :
-      {
-        "navigationBarTitleText" : "map"
-      }
-    },
     {
       "path" : "pages/API/make-phone-call/make-phone-call",
       "style" :
diff --git a/pages/API/map/map.uvue b/pages/API/map/map.uvue
deleted file mode 100644
index e2d03bba1493882c09a60eadbfa7a2d9238f9a40..0000000000000000000000000000000000000000
--- a/pages/API/map/map.uvue
+++ /dev/null
@@ -1,468 +0,0 @@
-<template>
-  <view class="content">
-    <map class="map" id="map1" ref="map1" :controls="controls" :scale="scale" :longitude="location.longitude"
-      :latitude="location.latitude" :show-location="showLocation" :enable-3D="enable3D" :rotate="rotate" :skew="skew"
-      :show-compass="showCompass" :enable-overlooking="enableOverlooking" :enable-zoom="enableZoom"
-      :enable-scroll="enableScroll" :enable-rotate="enableRotate" :enable-satellite="enableSatellite"
-      :enable-traffic="enableTraffic" :markers="markers" :polyline="polyline" :circles="circles" :polygons="polygons"
-      :include-points="includePoints" @tap="maptap" @controltap="oncontroltap" @markertap="onmarkertap"
-      @callouttap="oncallouttap" @poitap="onpoitap" @updated="onupdated" @regionchange="onregionchange"></map>
-    <scroll-view class="scrollview" scroll-y="true">
-
-      <button class="button" @click="changeScale">changeScale</button>
-      <button class="button" @click="addMarkers">addMarkers</button>
-      <button class="button" @click="addPolyline">addPolyline</button>
-      <button class="button" @click="addPolygons">addPolygons</button>
-      <button class="button" @click="addCircles">addCircles</button>
-      <button class="button" @click="includePoint">includePoints</button>
-      <button class="button" @click="handleGetCenterLocation">getCenterLocation</button>
-      <button class="button" @click="handleGetRegion">getRegion</button>
-      <button class="button" @click="handleTranslateMarker">translateMarker</button>
-
-    </scroll-view>
-  </view>
-</template>
-
-<script lang="uts">
-  type Anchor = {
-    x : number,
-    y : number
-  }
-
-  type Callout = {
-    content : string,
-    color : string,
-    fontSize : number,
-    borderRadius : number,
-    borderWidth : number,
-    borderColor : string,
-    bgColor : string,
-    padding : string,
-    display : string
-  }
-
-  type Markers = {
-    id : string | number,
-    latitude : number,
-    longitude : number,
-    title : string
-    zIndex : string,
-    iconPath : string,
-    rotate ?: number,
-    width : number,
-    height : number,
-    anchor : Anchor,
-    callout : Callout
-  }
-
-  type Points = {
-    latitude : number,
-    longitude : number
-  }
-
-  type Polyline = {
-    points : Points[],
-    color : string,
-    width : number,
-    dottedLine : boolean,
-    arrowLine : boolean,
-    borderColor : string,
-    borderWidth : number
-  }
-
-  type Polygons = {
-    points : Points[];
-    fillColor : string;
-    strokeWidth : number;
-    strokeColor : string;
-    zIndex : number;
-  }
-
-  type Circles = {
-    latitude : number;
-    longitude : number;
-    radius : number;
-    strokeWidth : number;
-    color : string;
-    fillColor : string;
-  }
-
-  const testMarkers = [{
-    id: 0,
-    latitude: 39.989631,
-    longitude: 116.481018,
-    title: '方恒国际 阜通东大街6号',
-    zIndex: '1',
-    iconPath: '../../../static/location.png',
-    rotate: 0,
-    width: 20,
-    height: 20,
-    anchor: {
-      x: 0.5,
-      y: 1
-    },
-    callout: {
-      content: '方恒国际 阜通东大街6号',
-      color: '#00BFFF',
-      fontSize: 10,
-      borderRadius: 4,
-      borderWidth: 1,
-      borderColor: '#333300',
-      bgColor: '#CCFF99',
-      padding: '5',
-      display: 'ALWAYS'
-    }
-  },
-  {
-    id: 1,
-    latitude: 39.9086920000,
-    longitude: 116.3974770000,
-    title: '天安门',
-    zIndex: '1',
-    iconPath: '../../../static/location.png',
-    width: 40,
-    height: 40,
-    anchor: {
-      x: 0.5,
-      y: 1
-    },
-    callout: {
-      content: '首都北京\n天安门',
-      color: '#00BFFF',
-      fontSize: 12,
-      borderRadius: 2,
-      borderWidth: 0,
-      borderColor: '#333300',
-      bgColor: '#CCFF11',
-      padding: '1',
-      display: 'ALWAYS'
-    }
-  }
-  ];
-
-  const testPolyline = [{
-    points: [{
-      latitude: 39.925539,
-      longitude: 116.279037
-    },
-    {
-      latitude: 39.925539,
-      longitude: 116.520285
-    }],
-    color: '#FFCCFF',
-    width: 7,
-    dottedLine: true,
-    arrowLine: true,
-    borderColor: '#000000',
-    borderWidth: 2
-  },
-  {
-    points: [{
-      latitude: 39.938698,
-      longitude: 116.275177
-    },
-    {
-      latitude: 39.966069,
-      longitude: 116.289253
-    },
-    {
-      latitude: 39.944226,
-      longitude: 116.306076
-    },
-    {
-      latitude: 39.966069,
-      longitude: 116.322899
-    },
-    {
-      latitude: 39.938698,
-      longitude: 116.336975
-    }],
-    color: '#CCFFFF',
-    width: 5,
-    dottedLine: true,
-    arrowLine: true,
-    borderColor: '#CC0000',
-    borderWidth: 3
-  }
-  ];
-
-  const testPolygons = [{
-    points: [{
-      latitude: 39.781892,
-      longitude: 116.293413
-    },
-    {
-      latitude: 39.787600,
-      longitude: 116.391842
-    },
-    {
-      latitude: 39.733187,
-      longitude: 116.417932
-    },
-    {
-      latitude: 39.704653,
-      longitude: 116.338255
-    }],
-    fillColor: '#FFCCFF',
-    strokeWidth: 3,
-    strokeColor: '#CC99CC',
-    zIndex: 11
-  },
-  {
-    points: [{
-      latitude: 39.887600,
-      longitude: 116.518932
-    },
-    {
-      latitude: 39.781892,
-      longitude: 116.518932
-    },
-    {
-      latitude: 39.781892,
-      longitude: 116.428932
-    },
-    {
-      latitude: 39.887600,
-      longitude: 116.428932
-    }
-    ],
-    fillColor: '#CCFFFF',
-    strokeWidth: 5,
-    strokeColor: '#CC0000',
-    zIndex: 3
-  }
-  ];
-
-  const testCircles = [{
-    latitude: 39.996441,
-    longitude: 116.411146,
-    radius: 15000,
-    strokeWidth: 5,
-    color: '#CCFFFF',
-    fillColor: '#CC0000'
-  },
-  {
-    latitude: 40.096441,
-    longitude: 116.511146,
-    radius: 12000,
-    strokeWidth: 3,
-    color: '#CCFFFF',
-    fillColor: '#FFCCFF'
-  },
-  {
-    latitude: 39.896441,
-    longitude: 116.311146,
-    radius: 9000,
-    strokeWidth: 1,
-    color: '#CCFFFF',
-    fillColor: '#CC0000'
-  }
-  ];
-
-  const testIncludePoints = [{
-    latitude: 39.989631,
-    longitude: 116.481018,
-  },
-  {
-    latitude: 39.9086920000,
-    longitude: 116.3974770000,
-  }
-  ];
-
-  export default {
-    data() {
-      return {
-        location: {
-          longitude: 116.3974770000,
-          latitude: 39.9086920000
-        },
-        controls: [{
-          id: 1,
-          position: {
-            left: 5,
-            top: 180,
-            width: 30,
-            height: 30
-          },
-          iconPath: '../../../static/uni.png',
-          clickable: true
-        }],
-        showLocation: false,
-        scale: 13,
-        showCompass: true,
-        enable3D: true,
-        enableOverlooking: true,
-        enableZoom: true,
-        enableScroll: true,
-        enableRotate: true,
-        enableSatellite: false,
-        enableTraffic: false,
-        polyline: [] as Polyline[],
-        markers: [] as Markers[],
-        polygons: [] as Polygons[],
-        circles: [] as Circles[],
-        includePoints: [] as Points[],
-        rotate: 0,
-        skew: 0,
-        map: null as MapContext | null,
-        // 自动化测试
-        autoTest: false,
-        getCenterLocationTest:{},
-        getRegionTest:{},
-      }
-    },
-    onReady() {
-      this.map = uni.createMapContext("map1", this);
-    },
-    methods: {
-      changeScale() {
-        this.scale = this.scale == 9 ? 15 : 9;
-      },
-      enableThreeD(e) {
-        this.enable3D = e.detail.value;
-      },
-      changeShowCompass(e) {
-        this.showCompass = e.detail.value;
-      },
-      changeEnableOverlooking(e) {
-        this.enableOverlooking = e.detail.value;
-      },
-      changeEnableZoom(e) {
-        this.enableZoom = e.detail.value;
-      },
-      changeEnableScroll(e) {
-        this.enableScroll = e.detail.value;
-      },
-      changeEnableRotate(e) {
-        this.enableRotate = e.detail.value;
-      },
-      changeEnableSatellite(e) {
-        this.enableSatellite = e.detail.value;
-      },
-      changeEnableTraffic(e) {
-        this.enableTraffic = e.detail.value;
-      },
-      addMarkers() {
-        this.markers = testMarkers;
-      },
-      addPolyline() {
-        this.polyline = testPolyline;
-      },
-
-      addPolygons() {
-        this.polygons = testPolygons;
-      },
-
-      addCircles() {
-        this.circles = testCircles;
-      },
-      includePoint() {
-        this.includePoints = testIncludePoints;
-      },
-      handleGetCenterLocation() {
-        this.map!.getCenterLocation({
-          success: ret => {
-            console.log(JSON.stringify(ret));
-            this.getCenterLocationTest = ret
-            if(!this.autoTest){
-              uni.showModal({
-                content: JSON.stringify(ret)
-              })
-            }
-          }
-        })
-      },
-      handleGetRegion() {
-        this.map!.getRegion({
-          success: ret => {
-            console.log(JSON.stringify(ret));
-            this.getRegionTest = ret
-            if(!this.autoTest){
-              uni.showModal({
-                content: JSON.stringify(ret)
-              })
-            }
-          }
-        })
-      },
-
-      handleTranslateMarker() {
-        this.map!.translateMarker({
-          markerId: 1,
-          destination: {
-            latitude: 39.989631,
-            longitude: 116.481018
-          },
-          duration: 2000,
-          success: ret => {
-            console.log(JSON.stringify(ret));
-          }
-        });
-      },
-      maptap(e) {
-        uni.showModal({
-          content: JSON.stringify(e)
-        })
-      },
-      onmarkertap(e) {
-        uni.showModal({
-          content: JSON.stringify(e)
-        })
-      },
-      oncontroltap(e) {
-        uni.showModal({
-          content: JSON.stringify(e)
-        })
-      },
-      oncallouttap(e) {
-        uni.showModal({
-          content: JSON.stringify(e)
-        })
-      },
-      onupdated(e) {
-        console.log(JSON.stringify(e))
-      },
-      onregionchange(e) {
-        console.log(JSON.stringify(e));
-      },
-      onpoitap(e) {
-        uni.showModal({
-          content: JSON.stringify(e)
-        })
-      }
-    }
-  }
-</script>
-
-<style>
-  .content {
-    flex: 1;
-  }
-
-  .map {
-    width: 100%;
-    height: 250px;
-    background-color: #f0f0f0;
-  }
-
-  .scrollview {
-    flex: 1;
-    padding: 10px;
-  }
-
-  .list-item {
-    flex-direction: row;
-    flex-wrap: nowrap;
-    align-items: center;
-    padding: 5px 0px;
-  }
-
-  .list-text {
-    flex: 1;
-  }
-
-  .button {
-    margin-top: 5px;
-    margin-bottom: 5px;
-  }
-</style>
diff --git a/pages/API/map/map.test.js b/pages/component/map/map.test.js
similarity index 97%
rename from pages/API/map/map.test.js
rename to pages/component/map/map.test.js
index 7e97c643fac0e60d5684b13df004bf9e5a267e0d..1a5c8e8c3481cf772e2657b2f5bef94aa895f263 100644
--- a/pages/API/map/map.test.js
+++ b/pages/component/map/map.test.js
@@ -8,7 +8,7 @@ describe('web-map', () => {
     return
   }
   beforeAll(async () => {
-    page = await program.reLaunch('/pages/API/map/map')
+    page = await program.reLaunch('/pages/component/map/map')
     await page.waitFor('view');
     // 等待地图加载完成
     await page.waitFor(4000);
diff --git a/pages/component/map/map.uvue b/pages/component/map/map.uvue
index de69428cdcecd86e55efa2c2265e3bcced506dd0..e2d03bba1493882c09a60eadbfa7a2d9238f9a40 100644
--- a/pages/component/map/map.uvue
+++ b/pages/component/map/map.uvue
@@ -1,39 +1,468 @@
 <template>
-	<view>
-		<page-head :title="title"></page-head>
-		<view class="uni-common-mt">
-			<view>
-				<map :latitude="latitude" :longitude="longitude" :markers="covers">
-				</map>
-			</view>
-		</view>
-	</view>
+  <view class="content">
+    <map class="map" id="map1" ref="map1" :controls="controls" :scale="scale" :longitude="location.longitude"
+      :latitude="location.latitude" :show-location="showLocation" :enable-3D="enable3D" :rotate="rotate" :skew="skew"
+      :show-compass="showCompass" :enable-overlooking="enableOverlooking" :enable-zoom="enableZoom"
+      :enable-scroll="enableScroll" :enable-rotate="enableRotate" :enable-satellite="enableSatellite"
+      :enable-traffic="enableTraffic" :markers="markers" :polyline="polyline" :circles="circles" :polygons="polygons"
+      :include-points="includePoints" @tap="maptap" @controltap="oncontroltap" @markertap="onmarkertap"
+      @callouttap="oncallouttap" @poitap="onpoitap" @updated="onupdated" @regionchange="onregionchange"></map>
+    <scroll-view class="scrollview" scroll-y="true">
+
+      <button class="button" @click="changeScale">changeScale</button>
+      <button class="button" @click="addMarkers">addMarkers</button>
+      <button class="button" @click="addPolyline">addPolyline</button>
+      <button class="button" @click="addPolygons">addPolygons</button>
+      <button class="button" @click="addCircles">addCircles</button>
+      <button class="button" @click="includePoint">includePoints</button>
+      <button class="button" @click="handleGetCenterLocation">getCenterLocation</button>
+      <button class="button" @click="handleGetRegion">getRegion</button>
+      <button class="button" @click="handleTranslateMarker">translateMarker</button>
+
+    </scroll-view>
+  </view>
 </template>
-<script>
-	export default {
-		data() {
-			return {
-				title: 'map',
-				latitude: 39.909,
-				longitude: 116.39742,
-				covers: [{
-					id: 1,
-					latitude: 39.9085,
-					longitude: 116.39747,
-					iconPath: '../../../static/location.png',
-				}, {
-					id: 2,
-					latitude: 39.90,
-					longitude: 116.39,
-					iconPath: '../../../static/location.png',
-				}]
-			}
-		}
-	}
+
+<script lang="uts">
+  type Anchor = {
+    x : number,
+    y : number
+  }
+
+  type Callout = {
+    content : string,
+    color : string,
+    fontSize : number,
+    borderRadius : number,
+    borderWidth : number,
+    borderColor : string,
+    bgColor : string,
+    padding : string,
+    display : string
+  }
+
+  type Markers = {
+    id : string | number,
+    latitude : number,
+    longitude : number,
+    title : string
+    zIndex : string,
+    iconPath : string,
+    rotate ?: number,
+    width : number,
+    height : number,
+    anchor : Anchor,
+    callout : Callout
+  }
+
+  type Points = {
+    latitude : number,
+    longitude : number
+  }
+
+  type Polyline = {
+    points : Points[],
+    color : string,
+    width : number,
+    dottedLine : boolean,
+    arrowLine : boolean,
+    borderColor : string,
+    borderWidth : number
+  }
+
+  type Polygons = {
+    points : Points[];
+    fillColor : string;
+    strokeWidth : number;
+    strokeColor : string;
+    zIndex : number;
+  }
+
+  type Circles = {
+    latitude : number;
+    longitude : number;
+    radius : number;
+    strokeWidth : number;
+    color : string;
+    fillColor : string;
+  }
+
+  const testMarkers = [{
+    id: 0,
+    latitude: 39.989631,
+    longitude: 116.481018,
+    title: '方恒国际 阜通东大街6号',
+    zIndex: '1',
+    iconPath: '../../../static/location.png',
+    rotate: 0,
+    width: 20,
+    height: 20,
+    anchor: {
+      x: 0.5,
+      y: 1
+    },
+    callout: {
+      content: '方恒国际 阜通东大街6号',
+      color: '#00BFFF',
+      fontSize: 10,
+      borderRadius: 4,
+      borderWidth: 1,
+      borderColor: '#333300',
+      bgColor: '#CCFF99',
+      padding: '5',
+      display: 'ALWAYS'
+    }
+  },
+  {
+    id: 1,
+    latitude: 39.9086920000,
+    longitude: 116.3974770000,
+    title: '天安门',
+    zIndex: '1',
+    iconPath: '../../../static/location.png',
+    width: 40,
+    height: 40,
+    anchor: {
+      x: 0.5,
+      y: 1
+    },
+    callout: {
+      content: '首都北京\n天安门',
+      color: '#00BFFF',
+      fontSize: 12,
+      borderRadius: 2,
+      borderWidth: 0,
+      borderColor: '#333300',
+      bgColor: '#CCFF11',
+      padding: '1',
+      display: 'ALWAYS'
+    }
+  }
+  ];
+
+  const testPolyline = [{
+    points: [{
+      latitude: 39.925539,
+      longitude: 116.279037
+    },
+    {
+      latitude: 39.925539,
+      longitude: 116.520285
+    }],
+    color: '#FFCCFF',
+    width: 7,
+    dottedLine: true,
+    arrowLine: true,
+    borderColor: '#000000',
+    borderWidth: 2
+  },
+  {
+    points: [{
+      latitude: 39.938698,
+      longitude: 116.275177
+    },
+    {
+      latitude: 39.966069,
+      longitude: 116.289253
+    },
+    {
+      latitude: 39.944226,
+      longitude: 116.306076
+    },
+    {
+      latitude: 39.966069,
+      longitude: 116.322899
+    },
+    {
+      latitude: 39.938698,
+      longitude: 116.336975
+    }],
+    color: '#CCFFFF',
+    width: 5,
+    dottedLine: true,
+    arrowLine: true,
+    borderColor: '#CC0000',
+    borderWidth: 3
+  }
+  ];
+
+  const testPolygons = [{
+    points: [{
+      latitude: 39.781892,
+      longitude: 116.293413
+    },
+    {
+      latitude: 39.787600,
+      longitude: 116.391842
+    },
+    {
+      latitude: 39.733187,
+      longitude: 116.417932
+    },
+    {
+      latitude: 39.704653,
+      longitude: 116.338255
+    }],
+    fillColor: '#FFCCFF',
+    strokeWidth: 3,
+    strokeColor: '#CC99CC',
+    zIndex: 11
+  },
+  {
+    points: [{
+      latitude: 39.887600,
+      longitude: 116.518932
+    },
+    {
+      latitude: 39.781892,
+      longitude: 116.518932
+    },
+    {
+      latitude: 39.781892,
+      longitude: 116.428932
+    },
+    {
+      latitude: 39.887600,
+      longitude: 116.428932
+    }
+    ],
+    fillColor: '#CCFFFF',
+    strokeWidth: 5,
+    strokeColor: '#CC0000',
+    zIndex: 3
+  }
+  ];
+
+  const testCircles = [{
+    latitude: 39.996441,
+    longitude: 116.411146,
+    radius: 15000,
+    strokeWidth: 5,
+    color: '#CCFFFF',
+    fillColor: '#CC0000'
+  },
+  {
+    latitude: 40.096441,
+    longitude: 116.511146,
+    radius: 12000,
+    strokeWidth: 3,
+    color: '#CCFFFF',
+    fillColor: '#FFCCFF'
+  },
+  {
+    latitude: 39.896441,
+    longitude: 116.311146,
+    radius: 9000,
+    strokeWidth: 1,
+    color: '#CCFFFF',
+    fillColor: '#CC0000'
+  }
+  ];
+
+  const testIncludePoints = [{
+    latitude: 39.989631,
+    longitude: 116.481018,
+  },
+  {
+    latitude: 39.9086920000,
+    longitude: 116.3974770000,
+  }
+  ];
+
+  export default {
+    data() {
+      return {
+        location: {
+          longitude: 116.3974770000,
+          latitude: 39.9086920000
+        },
+        controls: [{
+          id: 1,
+          position: {
+            left: 5,
+            top: 180,
+            width: 30,
+            height: 30
+          },
+          iconPath: '../../../static/uni.png',
+          clickable: true
+        }],
+        showLocation: false,
+        scale: 13,
+        showCompass: true,
+        enable3D: true,
+        enableOverlooking: true,
+        enableZoom: true,
+        enableScroll: true,
+        enableRotate: true,
+        enableSatellite: false,
+        enableTraffic: false,
+        polyline: [] as Polyline[],
+        markers: [] as Markers[],
+        polygons: [] as Polygons[],
+        circles: [] as Circles[],
+        includePoints: [] as Points[],
+        rotate: 0,
+        skew: 0,
+        map: null as MapContext | null,
+        // 自动化测试
+        autoTest: false,
+        getCenterLocationTest:{},
+        getRegionTest:{},
+      }
+    },
+    onReady() {
+      this.map = uni.createMapContext("map1", this);
+    },
+    methods: {
+      changeScale() {
+        this.scale = this.scale == 9 ? 15 : 9;
+      },
+      enableThreeD(e) {
+        this.enable3D = e.detail.value;
+      },
+      changeShowCompass(e) {
+        this.showCompass = e.detail.value;
+      },
+      changeEnableOverlooking(e) {
+        this.enableOverlooking = e.detail.value;
+      },
+      changeEnableZoom(e) {
+        this.enableZoom = e.detail.value;
+      },
+      changeEnableScroll(e) {
+        this.enableScroll = e.detail.value;
+      },
+      changeEnableRotate(e) {
+        this.enableRotate = e.detail.value;
+      },
+      changeEnableSatellite(e) {
+        this.enableSatellite = e.detail.value;
+      },
+      changeEnableTraffic(e) {
+        this.enableTraffic = e.detail.value;
+      },
+      addMarkers() {
+        this.markers = testMarkers;
+      },
+      addPolyline() {
+        this.polyline = testPolyline;
+      },
+
+      addPolygons() {
+        this.polygons = testPolygons;
+      },
+
+      addCircles() {
+        this.circles = testCircles;
+      },
+      includePoint() {
+        this.includePoints = testIncludePoints;
+      },
+      handleGetCenterLocation() {
+        this.map!.getCenterLocation({
+          success: ret => {
+            console.log(JSON.stringify(ret));
+            this.getCenterLocationTest = ret
+            if(!this.autoTest){
+              uni.showModal({
+                content: JSON.stringify(ret)
+              })
+            }
+          }
+        })
+      },
+      handleGetRegion() {
+        this.map!.getRegion({
+          success: ret => {
+            console.log(JSON.stringify(ret));
+            this.getRegionTest = ret
+            if(!this.autoTest){
+              uni.showModal({
+                content: JSON.stringify(ret)
+              })
+            }
+          }
+        })
+      },
+
+      handleTranslateMarker() {
+        this.map!.translateMarker({
+          markerId: 1,
+          destination: {
+            latitude: 39.989631,
+            longitude: 116.481018
+          },
+          duration: 2000,
+          success: ret => {
+            console.log(JSON.stringify(ret));
+          }
+        });
+      },
+      maptap(e) {
+        uni.showModal({
+          content: JSON.stringify(e)
+        })
+      },
+      onmarkertap(e) {
+        uni.showModal({
+          content: JSON.stringify(e)
+        })
+      },
+      oncontroltap(e) {
+        uni.showModal({
+          content: JSON.stringify(e)
+        })
+      },
+      oncallouttap(e) {
+        uni.showModal({
+          content: JSON.stringify(e)
+        })
+      },
+      onupdated(e) {
+        console.log(JSON.stringify(e))
+      },
+      onregionchange(e) {
+        console.log(JSON.stringify(e));
+      },
+      onpoitap(e) {
+        uni.showModal({
+          content: JSON.stringify(e)
+        })
+      }
+    }
+  }
 </script>
+
 <style>
-	map {
-		width: 100%;
-		height: 600rpx;
-	}
+  .content {
+    flex: 1;
+  }
+
+  .map {
+    width: 100%;
+    height: 250px;
+    background-color: #f0f0f0;
+  }
+
+  .scrollview {
+    flex: 1;
+    padding: 10px;
+  }
+
+  .list-item {
+    flex-direction: row;
+    flex-wrap: nowrap;
+    align-items: center;
+    padding: 5px 0px;
+  }
+
+  .list-text {
+    flex: 1;
+  }
+
+  .button {
+    margin-top: 5px;
+    margin-bottom: 5px;
+  }
 </style>