diff --git a/src/components/Amap/AMapContainer.vue b/src/components/Amap/AMapContainer.vue
index d4b46fe..afd25e2 100644
--- a/src/components/Amap/AMapContainer.vue
+++ b/src/components/Amap/AMapContainer.vue
@@ -4,7 +4,9 @@
  * @Date: 2022-05-12 16:04:00
  -->
 <template>
-  <div :id="vid" ref="mapContainer" class="amap-container" />
+  <div :id="vid" ref="mapContainer" class="amap-container" >
+    <slot/>
+  </div>
 </template>
 
 <script>
@@ -20,6 +22,10 @@
       type: String,
       default: '3D'
     }, // 地图模式：2D,3D
+    styleId:{
+      type: String,
+      default: ''
+    }, // 高德地图样式id
     zoom: {
       type: Number,
       default: 13
@@ -31,7 +37,15 @@
     center: {
       type: Array,
       required: true
-    } // 初始化地图中心点位置 [lng,lat]
+    }, // 初始化地图中心点位置 [lng,lat]
+    plugins:{
+      type: Array,
+      default: ()=>[]
+    }, // 地图默认加载插件
+    uis:{
+      type: Array,
+      default: ()=>[]
+    } // 地图默认加载的AMapUI
   },
   data() {
     return {
@@ -41,31 +55,38 @@
   mounted() {
     this.initMap()
   },
+  beforeDestroy(){
+    this.map&& this.map.destroy()
+    this.map = null
+  },
   methods: {
     initMap() {
-      const { vid, zoom, zooms, center, viewMode } = this
+      const { vid, zoom, zooms, center, viewMode, styleId } = this
       window._AMapSecurityConfig = {
         securityJsCode: this.$store.getters.amapSecurityCode
       }
       AMapLoader.load({
-        key: this.$store.getters.amapKey, // 设置您的key
+        key: this.$store.getters.amapKey, // 秘钥，从store中取
         version: '2.0', // api版本，2.0
-        plugins: ['AMap.ToolBar', 'AMap.Driving'], // 使用插件
+        plugins: this.plugins, // 使用插件
         AMapUI: {
           version: '1.1',
-          plugins: []
+          plugins: this.uis
         },
         Loca: {
           version: '2.0'
         }
       }).then((AMap) => {
         window.AMap = AMap
-        this.map = new AMap.Map(vid, {
+        const options = {
           viewMode: viewMode,
-          zoom: zoom,
-          zooms: zooms,
-          center: center
-        })
+          zoom: zoom
+        }
+        if(zooms) options.zooms = zooms
+        if(center) options.center = center
+        if(styleId) options.mapStyle = `amap://styles/${styleId}`
+        this.map = new AMap.Map(vid, options)
+        // 通知父组件，已完成加载
         this.$emit('ready', this.map)
       }).catch(e => {
         this.$message.error('地图加载失败')

diff --git a/src/components/Amap/AMapContainer.vue b/src/components/Amap/AMapContainer.vue
index d4b46fe..afd25e2 100644
--- a/src/components/Amap/AMapContainer.vue
+++ b/src/components/Amap/AMapContainer.vue
@@ -4,7 +4,9 @@
  * @Date: 2022-05-12 16:04:00
  -->
 <template>
-  <div :id="vid" ref="mapContainer" class="amap-container" />
+  <div :id="vid" ref="mapContainer" class="amap-container" >
+    <slot/>
+  </div>
 </template>
 
 <script>
@@ -20,6 +22,10 @@
       type: String,
       default: '3D'
     }, // 地图模式：2D,3D
+    styleId:{
+      type: String,
+      default: ''
+    }, // 高德地图样式id
     zoom: {
       type: Number,
       default: 13
@@ -31,7 +37,15 @@
     center: {
       type: Array,
       required: true
-    } // 初始化地图中心点位置 [lng,lat]
+    }, // 初始化地图中心点位置 [lng,lat]
+    plugins:{
+      type: Array,
+      default: ()=>[]
+    }, // 地图默认加载插件
+    uis:{
+      type: Array,
+      default: ()=>[]
+    } // 地图默认加载的AMapUI
   },
   data() {
     return {
@@ -41,31 +55,38 @@
   mounted() {
     this.initMap()
   },
+  beforeDestroy(){
+    this.map&& this.map.destroy()
+    this.map = null
+  },
   methods: {
     initMap() {
-      const { vid, zoom, zooms, center, viewMode } = this
+      const { vid, zoom, zooms, center, viewMode, styleId } = this
       window._AMapSecurityConfig = {
         securityJsCode: this.$store.getters.amapSecurityCode
       }
       AMapLoader.load({
-        key: this.$store.getters.amapKey, // 设置您的key
+        key: this.$store.getters.amapKey, // 秘钥，从store中取
         version: '2.0', // api版本，2.0
-        plugins: ['AMap.ToolBar', 'AMap.Driving'], // 使用插件
+        plugins: this.plugins, // 使用插件
         AMapUI: {
           version: '1.1',
-          plugins: []
+          plugins: this.uis
         },
         Loca: {
           version: '2.0'
         }
       }).then((AMap) => {
         window.AMap = AMap
-        this.map = new AMap.Map(vid, {
+        const options = {
           viewMode: viewMode,
-          zoom: zoom,
-          zooms: zooms,
-          center: center
-        })
+          zoom: zoom
+        }
+        if(zooms) options.zooms = zooms
+        if(center) options.center = center
+        if(styleId) options.mapStyle = `amap://styles/${styleId}`
+        this.map = new AMap.Map(vid, options)
+        // 通知父组件，已完成加载
         this.$emit('ready', this.map)
       }).catch(e => {
         this.$message.error('地图加载失败')
diff --git a/src/components/Amap/mixins/register-component.js b/src/components/Amap/mixins/register-component.js
new file mode 100644
index 0000000..5f5c8cd
--- /dev/null
+++ b/src/components/Amap/mixins/register-component.js
@@ -0,0 +1,179 @@
+import upperCamelCase from 'uppercamelcase';
+import { commonConvertMap } from '../utils/convert-helper';
+import eventHelper from '../utils/event-helper';
+import { lazyAMapApiLoaderInstance } from '../services/injected-amap-api-instance';
+import VueAMap from '../';
+
+export default {
+  data() {
+    return {
+      unwatchFns: []
+    };
+  },
+
+  mounted() {
+    this.map = this.map || this.$parent.map;
+    if (this.map) {
+      this.register();
+    } else {
+      this.$on('ready', map => {
+        this.map = map;
+        this.register();
+      });
+    }
+  },
+
+  destroyed() {
+    this.unregisterEvents();
+    // if (!this.$amapComponent) return;
+    //
+    // this.$amapComponent.setMap && this.$amapComponent.setMap(null);
+    // this.$amapComponent.close && this.$amapComponent.close();
+    // this.$amapComponent.editor && this.$amapComponent.editor.close();
+    // this.unwatchFns.forEach(item => item());
+    // this.unwatchFns = [];
+  },
+
+  methods: {
+    getHandlerFun(prop) {
+      if (this.handlers && this.handlers[prop]) {
+        return this.handlers[prop];
+      }
+
+      return this.$amapComponent[`set${upperCamelCase(prop)}`] || this.$amapComponent.setOptions;
+    },
+    // 转换参数，遍历所有props
+    convertProps() {
+      const props = {};
+      if (this.map) props.map = this.map;
+      const { $options: { propsData = {} }, propsRedirect } = this;
+      return Object.keys(propsData).reduce((res, _key) => {
+        let key = _key;
+        let propsValue = this.convertSignalProp(key, propsData[key]);
+        if (propsValue === undefined) return res;
+        if (propsRedirect && propsRedirect[_key]) key = propsRedirect[key];
+        props[key] = propsValue;
+        return res;
+      }, props);
+    },
+    // 转换特定属性
+    convertSignalProp(key, sourceData) {
+      let converter = '';
+      let type = '';
+
+      try {
+        type = componentConfig.props[key];
+        converter = commonConvertMap[type];
+      } catch (e) {}
+      // 如果该属性是需要转换的
+      if (type && converter) {
+        return converter(sourceData);
+      } else if (this.converters && this.converters[key]) {
+        return this.converters[key].call(this, sourceData);
+      } else {
+        const convertFn = commonConvertMap[key];
+        if (convertFn) return convertFn(sourceData);
+        return sourceData;
+      }
+    },
+    // 注册事件
+    registerEvents() {
+      this.setEditorEvents && this.setEditorEvents();
+      if (!this.$options.propsData) return;
+      if (this.$options.propsData.events) {
+        for (let eventName in this.events) {
+          eventHelper.addListener(this.$amapComponent, eventName, this.events[eventName]);
+        }
+      }
+
+      if (this.$options.propsData.onceEvents) {
+        for (let eventName in this.onceEvents) {
+          eventHelper.addListenerOnce(this.$amapComponent, eventName, this.onceEvents[eventName]);
+        }
+      }
+    },
+    // 清除事件注册
+    unregisterEvents() {
+      eventHelper.clearListeners(this.$amapComponent);
+    },
+    // 添加属性监听
+    setPropWatchers() {
+      const { propsRedirect, $options: { propsData = {} } } = this;
+
+      Object.keys(propsData).forEach(prop => {
+        let handleProp = prop;
+        if (propsRedirect && propsRedirect[prop]) handleProp = propsRedirect[prop];
+        let handleFun = this.getHandlerFun(handleProp);
+        if (!handleFun && prop !== 'events') return;
+
+        // watch props
+        const unwatch = this.$watch(prop, nv => {
+          if (prop === 'events') {
+            this.unregisterEvents();
+            this.registerEvents();
+            return;
+          }
+          if (handleFun && handleFun === this.$amapComponent.setOptions) {
+            return handleFun.call(this.$amapComponent, {[handleProp]: this.convertSignalProp(prop, nv)});
+          }
+
+          handleFun.call(this.$amapComponent, this.convertSignalProp(prop, nv));
+        });
+
+        // collect watchers for destroyed
+        this.unwatchFns.push(unwatch);
+      });
+    },
+
+
+    // some prop can not init by initial created methods
+    // 一些不能再created时初始化的属性
+    initProps() {
+      const props = ['editable', 'visible'];
+
+      props.forEach(propStr => {
+        if (this[propStr] !== undefined) {
+          const handleFun = this.getHandlerFun(propStr);
+          handleFun && handleFun.call(this.$amapComponent, this.convertSignalProp(propStr, this[propStr]));
+        }
+      });
+      this.printReactiveProp();
+    },
+
+    /**
+     * methods for developing 开发用
+     * find reactive props
+     */
+    printReactiveProp() {
+      Object.keys(this._props).forEach(k => {
+        let fn = this.$amapComponent[`set${upperCamelCase(k)}`];
+        if (fn) {
+          console.log(k);
+        }
+      });
+    },
+    // 注册组件
+    register() {
+      const res = this.__initComponent && this.__initComponent(this.convertProps());
+      if (res && res.then) res.then((instance) => this.registerRest(instance));  // promise
+      else this.registerRest(res);
+    },
+    // 注册接口
+    registerRest(instance) {
+      if (!this.$amapComponent && instance) this.$amapComponent = instance;
+      this.registerEvents();
+      this.initProps();
+      this.setPropWatchers();
+
+      if (this.events && this.events.init) {
+        this.events.init(this.$amapComponent, this.map);
+      }
+
+    },
+
+    // helper method
+    $$getInstance() {
+      return this.$amapComponent;
+    }
+  }
+};

diff --git a/src/components/Amap/AMapContainer.vue b/src/components/Amap/AMapContainer.vue
index d4b46fe..afd25e2 100644
--- a/src/components/Amap/AMapContainer.vue
+++ b/src/components/Amap/AMapContainer.vue
@@ -4,7 +4,9 @@
  * @Date: 2022-05-12 16:04:00
  -->
 <template>
-  <div :id="vid" ref="mapContainer" class="amap-container" />
+  <div :id="vid" ref="mapContainer" class="amap-container" >
+    <slot/>
+  </div>
 </template>
 
 <script>
@@ -20,6 +22,10 @@
       type: String,
       default: '3D'
     }, // 地图模式：2D,3D
+    styleId:{
+      type: String,
+      default: ''
+    }, // 高德地图样式id
     zoom: {
       type: Number,
       default: 13
@@ -31,7 +37,15 @@
     center: {
       type: Array,
       required: true
-    } // 初始化地图中心点位置 [lng,lat]
+    }, // 初始化地图中心点位置 [lng,lat]
+    plugins:{
+      type: Array,
+      default: ()=>[]
+    }, // 地图默认加载插件
+    uis:{
+      type: Array,
+      default: ()=>[]
+    } // 地图默认加载的AMapUI
   },
   data() {
     return {
@@ -41,31 +55,38 @@
   mounted() {
     this.initMap()
   },
+  beforeDestroy(){
+    this.map&& this.map.destroy()
+    this.map = null
+  },
   methods: {
     initMap() {
-      const { vid, zoom, zooms, center, viewMode } = this
+      const { vid, zoom, zooms, center, viewMode, styleId } = this
       window._AMapSecurityConfig = {
         securityJsCode: this.$store.getters.amapSecurityCode
       }
       AMapLoader.load({
-        key: this.$store.getters.amapKey, // 设置您的key
+        key: this.$store.getters.amapKey, // 秘钥，从store中取
         version: '2.0', // api版本，2.0
-        plugins: ['AMap.ToolBar', 'AMap.Driving'], // 使用插件
+        plugins: this.plugins, // 使用插件
         AMapUI: {
           version: '1.1',
-          plugins: []
+          plugins: this.uis
         },
         Loca: {
           version: '2.0'
         }
       }).then((AMap) => {
         window.AMap = AMap
-        this.map = new AMap.Map(vid, {
+        const options = {
           viewMode: viewMode,
-          zoom: zoom,
-          zooms: zooms,
-          center: center
-        })
+          zoom: zoom
+        }
+        if(zooms) options.zooms = zooms
+        if(center) options.center = center
+        if(styleId) options.mapStyle = `amap://styles/${styleId}`
+        this.map = new AMap.Map(vid, options)
+        // 通知父组件，已完成加载
         this.$emit('ready', this.map)
       }).catch(e => {
         this.$message.error('地图加载失败')
diff --git a/src/components/Amap/mixins/register-component.js b/src/components/Amap/mixins/register-component.js
new file mode 100644
index 0000000..5f5c8cd
--- /dev/null
+++ b/src/components/Amap/mixins/register-component.js
@@ -0,0 +1,179 @@
+import upperCamelCase from 'uppercamelcase';
+import { commonConvertMap } from '../utils/convert-helper';
+import eventHelper from '../utils/event-helper';
+import { lazyAMapApiLoaderInstance } from '../services/injected-amap-api-instance';
+import VueAMap from '../';
+
+export default {
+  data() {
+    return {
+      unwatchFns: []
+    };
+  },
+
+  mounted() {
+    this.map = this.map || this.$parent.map;
+    if (this.map) {
+      this.register();
+    } else {
+      this.$on('ready', map => {
+        this.map = map;
+        this.register();
+      });
+    }
+  },
+
+  destroyed() {
+    this.unregisterEvents();
+    // if (!this.$amapComponent) return;
+    //
+    // this.$amapComponent.setMap && this.$amapComponent.setMap(null);
+    // this.$amapComponent.close && this.$amapComponent.close();
+    // this.$amapComponent.editor && this.$amapComponent.editor.close();
+    // this.unwatchFns.forEach(item => item());
+    // this.unwatchFns = [];
+  },
+
+  methods: {
+    getHandlerFun(prop) {
+      if (this.handlers && this.handlers[prop]) {
+        return this.handlers[prop];
+      }
+
+      return this.$amapComponent[`set${upperCamelCase(prop)}`] || this.$amapComponent.setOptions;
+    },
+    // 转换参数，遍历所有props
+    convertProps() {
+      const props = {};
+      if (this.map) props.map = this.map;
+      const { $options: { propsData = {} }, propsRedirect } = this;
+      return Object.keys(propsData).reduce((res, _key) => {
+        let key = _key;
+        let propsValue = this.convertSignalProp(key, propsData[key]);
+        if (propsValue === undefined) return res;
+        if (propsRedirect && propsRedirect[_key]) key = propsRedirect[key];
+        props[key] = propsValue;
+        return res;
+      }, props);
+    },
+    // 转换特定属性
+    convertSignalProp(key, sourceData) {
+      let converter = '';
+      let type = '';
+
+      try {
+        type = componentConfig.props[key];
+        converter = commonConvertMap[type];
+      } catch (e) {}
+      // 如果该属性是需要转换的
+      if (type && converter) {
+        return converter(sourceData);
+      } else if (this.converters && this.converters[key]) {
+        return this.converters[key].call(this, sourceData);
+      } else {
+        const convertFn = commonConvertMap[key];
+        if (convertFn) return convertFn(sourceData);
+        return sourceData;
+      }
+    },
+    // 注册事件
+    registerEvents() {
+      this.setEditorEvents && this.setEditorEvents();
+      if (!this.$options.propsData) return;
+      if (this.$options.propsData.events) {
+        for (let eventName in this.events) {
+          eventHelper.addListener(this.$amapComponent, eventName, this.events[eventName]);
+        }
+      }
+
+      if (this.$options.propsData.onceEvents) {
+        for (let eventName in this.onceEvents) {
+          eventHelper.addListenerOnce(this.$amapComponent, eventName, this.onceEvents[eventName]);
+        }
+      }
+    },
+    // 清除事件注册
+    unregisterEvents() {
+      eventHelper.clearListeners(this.$amapComponent);
+    },
+    // 添加属性监听
+    setPropWatchers() {
+      const { propsRedirect, $options: { propsData = {} } } = this;
+
+      Object.keys(propsData).forEach(prop => {
+        let handleProp = prop;
+        if (propsRedirect && propsRedirect[prop]) handleProp = propsRedirect[prop];
+        let handleFun = this.getHandlerFun(handleProp);
+        if (!handleFun && prop !== 'events') return;
+
+        // watch props
+        const unwatch = this.$watch(prop, nv => {
+          if (prop === 'events') {
+            this.unregisterEvents();
+            this.registerEvents();
+            return;
+          }
+          if (handleFun && handleFun === this.$amapComponent.setOptions) {
+            return handleFun.call(this.$amapComponent, {[handleProp]: this.convertSignalProp(prop, nv)});
+          }
+
+          handleFun.call(this.$amapComponent, this.convertSignalProp(prop, nv));
+        });
+
+        // collect watchers for destroyed
+        this.unwatchFns.push(unwatch);
+      });
+    },
+
+
+    // some prop can not init by initial created methods
+    // 一些不能再created时初始化的属性
+    initProps() {
+      const props = ['editable', 'visible'];
+
+      props.forEach(propStr => {
+        if (this[propStr] !== undefined) {
+          const handleFun = this.getHandlerFun(propStr);
+          handleFun && handleFun.call(this.$amapComponent, this.convertSignalProp(propStr, this[propStr]));
+        }
+      });
+      this.printReactiveProp();
+    },
+
+    /**
+     * methods for developing 开发用
+     * find reactive props
+     */
+    printReactiveProp() {
+      Object.keys(this._props).forEach(k => {
+        let fn = this.$amapComponent[`set${upperCamelCase(k)}`];
+        if (fn) {
+          console.log(k);
+        }
+      });
+    },
+    // 注册组件
+    register() {
+      const res = this.__initComponent && this.__initComponent(this.convertProps());
+      if (res && res.then) res.then((instance) => this.registerRest(instance));  // promise
+      else this.registerRest(res);
+    },
+    // 注册接口
+    registerRest(instance) {
+      if (!this.$amapComponent && instance) this.$amapComponent = instance;
+      this.registerEvents();
+      this.initProps();
+      this.setPropWatchers();
+
+      if (this.events && this.events.init) {
+        this.events.init(this.$amapComponent, this.map);
+      }
+
+    },
+
+    // helper method
+    $$getInstance() {
+      return this.$amapComponent;
+    }
+  }
+};
diff --git a/src/components/Amap/utils/compile.js b/src/components/Amap/utils/compile.js
new file mode 100644
index 0000000..16dda68
--- /dev/null
+++ b/src/components/Amap/utils/compile.js
@@ -0,0 +1,35 @@
+import Vue from 'vue';
+
+export const compile = (tpl, vm) => {
+  let keys = ['methods', 'computed', 'data', 'filters'];
+  let props = {};
+
+  let node = Vue.compile(tpl);
+  keys.forEach(key => {
+    props[key] = vm.$parent.$parent.$options[key];
+
+    if (key === 'data' && typeof props[key] === 'function') {
+      props[key] = props[key]();
+    }
+  });
+
+  let vNode = new Vue({
+    ...props,
+    ...node
+  });
+
+  vNode.$mount();
+  return vNode;
+};
+
+export const mountedVNode = (vn) => {
+  const instance = new Vue({render: (h) => h('div', vn)});
+  instance.$mount();
+  return instance;
+};
+
+export const mountedRenderFn = (renderFn, vueInstance) => {
+  const instance = new Vue({render: h => renderFn(h, vueInstance)});
+  instance.$mount();
+  return instance;
+};

diff --git a/src/components/Amap/AMapContainer.vue b/src/components/Amap/AMapContainer.vue
index d4b46fe..afd25e2 100644
--- a/src/components/Amap/AMapContainer.vue
+++ b/src/components/Amap/AMapContainer.vue
@@ -4,7 +4,9 @@
  * @Date: 2022-05-12 16:04:00
  -->
 <template>
-  <div :id="vid" ref="mapContainer" class="amap-container" />
+  <div :id="vid" ref="mapContainer" class="amap-container" >
+    <slot/>
+  </div>
 </template>
 
 <script>
@@ -20,6 +22,10 @@
       type: String,
       default: '3D'
     }, // 地图模式：2D,3D
+    styleId:{
+      type: String,
+      default: ''
+    }, // 高德地图样式id
     zoom: {
       type: Number,
       default: 13
@@ -31,7 +37,15 @@
     center: {
       type: Array,
       required: true
-    } // 初始化地图中心点位置 [lng,lat]
+    }, // 初始化地图中心点位置 [lng,lat]
+    plugins:{
+      type: Array,
+      default: ()=>[]
+    }, // 地图默认加载插件
+    uis:{
+      type: Array,
+      default: ()=>[]
+    } // 地图默认加载的AMapUI
   },
   data() {
     return {
@@ -41,31 +55,38 @@
   mounted() {
     this.initMap()
   },
+  beforeDestroy(){
+    this.map&& this.map.destroy()
+    this.map = null
+  },
   methods: {
     initMap() {
-      const { vid, zoom, zooms, center, viewMode } = this
+      const { vid, zoom, zooms, center, viewMode, styleId } = this
       window._AMapSecurityConfig = {
         securityJsCode: this.$store.getters.amapSecurityCode
       }
       AMapLoader.load({
-        key: this.$store.getters.amapKey, // 设置您的key
+        key: this.$store.getters.amapKey, // 秘钥，从store中取
         version: '2.0', // api版本，2.0
-        plugins: ['AMap.ToolBar', 'AMap.Driving'], // 使用插件
+        plugins: this.plugins, // 使用插件
         AMapUI: {
           version: '1.1',
-          plugins: []
+          plugins: this.uis
         },
         Loca: {
           version: '2.0'
         }
       }).then((AMap) => {
         window.AMap = AMap
-        this.map = new AMap.Map(vid, {
+        const options = {
           viewMode: viewMode,
-          zoom: zoom,
-          zooms: zooms,
-          center: center
-        })
+          zoom: zoom
+        }
+        if(zooms) options.zooms = zooms
+        if(center) options.center = center
+        if(styleId) options.mapStyle = `amap://styles/${styleId}`
+        this.map = new AMap.Map(vid, options)
+        // 通知父组件，已完成加载
         this.$emit('ready', this.map)
       }).catch(e => {
         this.$message.error('地图加载失败')
diff --git a/src/components/Amap/mixins/register-component.js b/src/components/Amap/mixins/register-component.js
new file mode 100644
index 0000000..5f5c8cd
--- /dev/null
+++ b/src/components/Amap/mixins/register-component.js
@@ -0,0 +1,179 @@
+import upperCamelCase from 'uppercamelcase';
+import { commonConvertMap } from '../utils/convert-helper';
+import eventHelper from '../utils/event-helper';
+import { lazyAMapApiLoaderInstance } from '../services/injected-amap-api-instance';
+import VueAMap from '../';
+
+export default {
+  data() {
+    return {
+      unwatchFns: []
+    };
+  },
+
+  mounted() {
+    this.map = this.map || this.$parent.map;
+    if (this.map) {
+      this.register();
+    } else {
+      this.$on('ready', map => {
+        this.map = map;
+        this.register();
+      });
+    }
+  },
+
+  destroyed() {
+    this.unregisterEvents();
+    // if (!this.$amapComponent) return;
+    //
+    // this.$amapComponent.setMap && this.$amapComponent.setMap(null);
+    // this.$amapComponent.close && this.$amapComponent.close();
+    // this.$amapComponent.editor && this.$amapComponent.editor.close();
+    // this.unwatchFns.forEach(item => item());
+    // this.unwatchFns = [];
+  },
+
+  methods: {
+    getHandlerFun(prop) {
+      if (this.handlers && this.handlers[prop]) {
+        return this.handlers[prop];
+      }
+
+      return this.$amapComponent[`set${upperCamelCase(prop)}`] || this.$amapComponent.setOptions;
+    },
+    // 转换参数，遍历所有props
+    convertProps() {
+      const props = {};
+      if (this.map) props.map = this.map;
+      const { $options: { propsData = {} }, propsRedirect } = this;
+      return Object.keys(propsData).reduce((res, _key) => {
+        let key = _key;
+        let propsValue = this.convertSignalProp(key, propsData[key]);
+        if (propsValue === undefined) return res;
+        if (propsRedirect && propsRedirect[_key]) key = propsRedirect[key];
+        props[key] = propsValue;
+        return res;
+      }, props);
+    },
+    // 转换特定属性
+    convertSignalProp(key, sourceData) {
+      let converter = '';
+      let type = '';
+
+      try {
+        type = componentConfig.props[key];
+        converter = commonConvertMap[type];
+      } catch (e) {}
+      // 如果该属性是需要转换的
+      if (type && converter) {
+        return converter(sourceData);
+      } else if (this.converters && this.converters[key]) {
+        return this.converters[key].call(this, sourceData);
+      } else {
+        const convertFn = commonConvertMap[key];
+        if (convertFn) return convertFn(sourceData);
+        return sourceData;
+      }
+    },
+    // 注册事件
+    registerEvents() {
+      this.setEditorEvents && this.setEditorEvents();
+      if (!this.$options.propsData) return;
+      if (this.$options.propsData.events) {
+        for (let eventName in this.events) {
+          eventHelper.addListener(this.$amapComponent, eventName, this.events[eventName]);
+        }
+      }
+
+      if (this.$options.propsData.onceEvents) {
+        for (let eventName in this.onceEvents) {
+          eventHelper.addListenerOnce(this.$amapComponent, eventName, this.onceEvents[eventName]);
+        }
+      }
+    },
+    // 清除事件注册
+    unregisterEvents() {
+      eventHelper.clearListeners(this.$amapComponent);
+    },
+    // 添加属性监听
+    setPropWatchers() {
+      const { propsRedirect, $options: { propsData = {} } } = this;
+
+      Object.keys(propsData).forEach(prop => {
+        let handleProp = prop;
+        if (propsRedirect && propsRedirect[prop]) handleProp = propsRedirect[prop];
+        let handleFun = this.getHandlerFun(handleProp);
+        if (!handleFun && prop !== 'events') return;
+
+        // watch props
+        const unwatch = this.$watch(prop, nv => {
+          if (prop === 'events') {
+            this.unregisterEvents();
+            this.registerEvents();
+            return;
+          }
+          if (handleFun && handleFun === this.$amapComponent.setOptions) {
+            return handleFun.call(this.$amapComponent, {[handleProp]: this.convertSignalProp(prop, nv)});
+          }
+
+          handleFun.call(this.$amapComponent, this.convertSignalProp(prop, nv));
+        });
+
+        // collect watchers for destroyed
+        this.unwatchFns.push(unwatch);
+      });
+    },
+
+
+    // some prop can not init by initial created methods
+    // 一些不能再created时初始化的属性
+    initProps() {
+      const props = ['editable', 'visible'];
+
+      props.forEach(propStr => {
+        if (this[propStr] !== undefined) {
+          const handleFun = this.getHandlerFun(propStr);
+          handleFun && handleFun.call(this.$amapComponent, this.convertSignalProp(propStr, this[propStr]));
+        }
+      });
+      this.printReactiveProp();
+    },
+
+    /**
+     * methods for developing 开发用
+     * find reactive props
+     */
+    printReactiveProp() {
+      Object.keys(this._props).forEach(k => {
+        let fn = this.$amapComponent[`set${upperCamelCase(k)}`];
+        if (fn) {
+          console.log(k);
+        }
+      });
+    },
+    // 注册组件
+    register() {
+      const res = this.__initComponent && this.__initComponent(this.convertProps());
+      if (res && res.then) res.then((instance) => this.registerRest(instance));  // promise
+      else this.registerRest(res);
+    },
+    // 注册接口
+    registerRest(instance) {
+      if (!this.$amapComponent && instance) this.$amapComponent = instance;
+      this.registerEvents();
+      this.initProps();
+      this.setPropWatchers();
+
+      if (this.events && this.events.init) {
+        this.events.init(this.$amapComponent, this.map);
+      }
+
+    },
+
+    // helper method
+    $$getInstance() {
+      return this.$amapComponent;
+    }
+  }
+};
diff --git a/src/components/Amap/utils/compile.js b/src/components/Amap/utils/compile.js
new file mode 100644
index 0000000..16dda68
--- /dev/null
+++ b/src/components/Amap/utils/compile.js
@@ -0,0 +1,35 @@
+import Vue from 'vue';
+
+export const compile = (tpl, vm) => {
+  let keys = ['methods', 'computed', 'data', 'filters'];
+  let props = {};
+
+  let node = Vue.compile(tpl);
+  keys.forEach(key => {
+    props[key] = vm.$parent.$parent.$options[key];
+
+    if (key === 'data' && typeof props[key] === 'function') {
+      props[key] = props[key]();
+    }
+  });
+
+  let vNode = new Vue({
+    ...props,
+    ...node
+  });
+
+  vNode.$mount();
+  return vNode;
+};
+
+export const mountedVNode = (vn) => {
+  const instance = new Vue({render: (h) => h('div', vn)});
+  instance.$mount();
+  return instance;
+};
+
+export const mountedRenderFn = (renderFn, vueInstance) => {
+  const instance = new Vue({render: h => renderFn(h, vueInstance)});
+  instance.$mount();
+  return instance;
+};
diff --git a/src/components/Amap/utils/convert-helper.js b/src/components/Amap/utils/convert-helper.js
new file mode 100644
index 0000000..6907b0f
--- /dev/null
+++ b/src/components/Amap/utils/convert-helper.js
@@ -0,0 +1,39 @@
+export function toPixel(arr) {
+  return new window.AMap.Pixel(arr[0], arr[1]);
+}
+
+export function toSize(arr) {
+  return new window.AMap.Size(arr[0], arr[1]);
+}
+
+export function pixelTo(pixel) {
+  if (Array.isArray(pixel)) return pixel;
+  return [pixel.getX(), pixel.getY()];
+}
+
+export function toLngLat(arr) {
+  return new window.AMap.LngLat(arr[0], arr[1]);
+}
+
+export function lngLatTo(lngLat) {
+  if (!lngLat) return;
+  if (Array.isArray(lngLat)) return lngLat.slice();
+  return [lngLat.getLng(), lngLat.getLat()];
+}
+
+/**
+ * @param arrs 二重数组 southWest, northEast
+ */
+export function toBounds(arrs) {
+  return new window.AMap.Bounds(toLngLat(arrs[0]), toLngLat(arrs[1]));
+}
+
+export const commonConvertMap = {
+  position: toLngLat,
+  offset: toPixel,
+  bounds: toBounds,
+  LngLat: toLngLat,
+  Pixel: toPixel,
+  Size: toSize,
+  Bounds: toBounds
+};

diff --git a/src/components/Amap/AMapContainer.vue b/src/components/Amap/AMapContainer.vue
index d4b46fe..afd25e2 100644
--- a/src/components/Amap/AMapContainer.vue
+++ b/src/components/Amap/AMapContainer.vue
@@ -4,7 +4,9 @@
  * @Date: 2022-05-12 16:04:00
  -->
 <template>
-  <div :id="vid" ref="mapContainer" class="amap-container" />
+  <div :id="vid" ref="mapContainer" class="amap-container" >
+    <slot/>
+  </div>
 </template>
 
 <script>
@@ -20,6 +22,10 @@
       type: String,
       default: '3D'
     }, // 地图模式：2D,3D
+    styleId:{
+      type: String,
+      default: ''
+    }, // 高德地图样式id
     zoom: {
       type: Number,
       default: 13
@@ -31,7 +37,15 @@
     center: {
       type: Array,
       required: true
-    } // 初始化地图中心点位置 [lng,lat]
+    }, // 初始化地图中心点位置 [lng,lat]
+    plugins:{
+      type: Array,
+      default: ()=>[]
+    }, // 地图默认加载插件
+    uis:{
+      type: Array,
+      default: ()=>[]
+    } // 地图默认加载的AMapUI
   },
   data() {
     return {
@@ -41,31 +55,38 @@
   mounted() {
     this.initMap()
   },
+  beforeDestroy(){
+    this.map&& this.map.destroy()
+    this.map = null
+  },
   methods: {
     initMap() {
-      const { vid, zoom, zooms, center, viewMode } = this
+      const { vid, zoom, zooms, center, viewMode, styleId } = this
       window._AMapSecurityConfig = {
         securityJsCode: this.$store.getters.amapSecurityCode
       }
       AMapLoader.load({
-        key: this.$store.getters.amapKey, // 设置您的key
+        key: this.$store.getters.amapKey, // 秘钥，从store中取
         version: '2.0', // api版本，2.0
-        plugins: ['AMap.ToolBar', 'AMap.Driving'], // 使用插件
+        plugins: this.plugins, // 使用插件
         AMapUI: {
           version: '1.1',
-          plugins: []
+          plugins: this.uis
         },
         Loca: {
           version: '2.0'
         }
       }).then((AMap) => {
         window.AMap = AMap
-        this.map = new AMap.Map(vid, {
+        const options = {
           viewMode: viewMode,
-          zoom: zoom,
-          zooms: zooms,
-          center: center
-        })
+          zoom: zoom
+        }
+        if(zooms) options.zooms = zooms
+        if(center) options.center = center
+        if(styleId) options.mapStyle = `amap://styles/${styleId}`
+        this.map = new AMap.Map(vid, options)
+        // 通知父组件，已完成加载
         this.$emit('ready', this.map)
       }).catch(e => {
         this.$message.error('地图加载失败')
diff --git a/src/components/Amap/mixins/register-component.js b/src/components/Amap/mixins/register-component.js
new file mode 100644
index 0000000..5f5c8cd
--- /dev/null
+++ b/src/components/Amap/mixins/register-component.js
@@ -0,0 +1,179 @@
+import upperCamelCase from 'uppercamelcase';
+import { commonConvertMap } from '../utils/convert-helper';
+import eventHelper from '../utils/event-helper';
+import { lazyAMapApiLoaderInstance } from '../services/injected-amap-api-instance';
+import VueAMap from '../';
+
+export default {
+  data() {
+    return {
+      unwatchFns: []
+    };
+  },
+
+  mounted() {
+    this.map = this.map || this.$parent.map;
+    if (this.map) {
+      this.register();
+    } else {
+      this.$on('ready', map => {
+        this.map = map;
+        this.register();
+      });
+    }
+  },
+
+  destroyed() {
+    this.unregisterEvents();
+    // if (!this.$amapComponent) return;
+    //
+    // this.$amapComponent.setMap && this.$amapComponent.setMap(null);
+    // this.$amapComponent.close && this.$amapComponent.close();
+    // this.$amapComponent.editor && this.$amapComponent.editor.close();
+    // this.unwatchFns.forEach(item => item());
+    // this.unwatchFns = [];
+  },
+
+  methods: {
+    getHandlerFun(prop) {
+      if (this.handlers && this.handlers[prop]) {
+        return this.handlers[prop];
+      }
+
+      return this.$amapComponent[`set${upperCamelCase(prop)}`] || this.$amapComponent.setOptions;
+    },
+    // 转换参数，遍历所有props
+    convertProps() {
+      const props = {};
+      if (this.map) props.map = this.map;
+      const { $options: { propsData = {} }, propsRedirect } = this;
+      return Object.keys(propsData).reduce((res, _key) => {
+        let key = _key;
+        let propsValue = this.convertSignalProp(key, propsData[key]);
+        if (propsValue === undefined) return res;
+        if (propsRedirect && propsRedirect[_key]) key = propsRedirect[key];
+        props[key] = propsValue;
+        return res;
+      }, props);
+    },
+    // 转换特定属性
+    convertSignalProp(key, sourceData) {
+      let converter = '';
+      let type = '';
+
+      try {
+        type = componentConfig.props[key];
+        converter = commonConvertMap[type];
+      } catch (e) {}
+      // 如果该属性是需要转换的
+      if (type && converter) {
+        return converter(sourceData);
+      } else if (this.converters && this.converters[key]) {
+        return this.converters[key].call(this, sourceData);
+      } else {
+        const convertFn = commonConvertMap[key];
+        if (convertFn) return convertFn(sourceData);
+        return sourceData;
+      }
+    },
+    // 注册事件
+    registerEvents() {
+      this.setEditorEvents && this.setEditorEvents();
+      if (!this.$options.propsData) return;
+      if (this.$options.propsData.events) {
+        for (let eventName in this.events) {
+          eventHelper.addListener(this.$amapComponent, eventName, this.events[eventName]);
+        }
+      }
+
+      if (this.$options.propsData.onceEvents) {
+        for (let eventName in this.onceEvents) {
+          eventHelper.addListenerOnce(this.$amapComponent, eventName, this.onceEvents[eventName]);
+        }
+      }
+    },
+    // 清除事件注册
+    unregisterEvents() {
+      eventHelper.clearListeners(this.$amapComponent);
+    },
+    // 添加属性监听
+    setPropWatchers() {
+      const { propsRedirect, $options: { propsData = {} } } = this;
+
+      Object.keys(propsData).forEach(prop => {
+        let handleProp = prop;
+        if (propsRedirect && propsRedirect[prop]) handleProp = propsRedirect[prop];
+        let handleFun = this.getHandlerFun(handleProp);
+        if (!handleFun && prop !== 'events') return;
+
+        // watch props
+        const unwatch = this.$watch(prop, nv => {
+          if (prop === 'events') {
+            this.unregisterEvents();
+            this.registerEvents();
+            return;
+          }
+          if (handleFun && handleFun === this.$amapComponent.setOptions) {
+            return handleFun.call(this.$amapComponent, {[handleProp]: this.convertSignalProp(prop, nv)});
+          }
+
+          handleFun.call(this.$amapComponent, this.convertSignalProp(prop, nv));
+        });
+
+        // collect watchers for destroyed
+        this.unwatchFns.push(unwatch);
+      });
+    },
+
+
+    // some prop can not init by initial created methods
+    // 一些不能再created时初始化的属性
+    initProps() {
+      const props = ['editable', 'visible'];
+
+      props.forEach(propStr => {
+        if (this[propStr] !== undefined) {
+          const handleFun = this.getHandlerFun(propStr);
+          handleFun && handleFun.call(this.$amapComponent, this.convertSignalProp(propStr, this[propStr]));
+        }
+      });
+      this.printReactiveProp();
+    },
+
+    /**
+     * methods for developing 开发用
+     * find reactive props
+     */
+    printReactiveProp() {
+      Object.keys(this._props).forEach(k => {
+        let fn = this.$amapComponent[`set${upperCamelCase(k)}`];
+        if (fn) {
+          console.log(k);
+        }
+      });
+    },
+    // 注册组件
+    register() {
+      const res = this.__initComponent && this.__initComponent(this.convertProps());
+      if (res && res.then) res.then((instance) => this.registerRest(instance));  // promise
+      else this.registerRest(res);
+    },
+    // 注册接口
+    registerRest(instance) {
+      if (!this.$amapComponent && instance) this.$amapComponent = instance;
+      this.registerEvents();
+      this.initProps();
+      this.setPropWatchers();
+
+      if (this.events && this.events.init) {
+        this.events.init(this.$amapComponent, this.map);
+      }
+
+    },
+
+    // helper method
+    $$getInstance() {
+      return this.$amapComponent;
+    }
+  }
+};
diff --git a/src/components/Amap/utils/compile.js b/src/components/Amap/utils/compile.js
new file mode 100644
index 0000000..16dda68
--- /dev/null
+++ b/src/components/Amap/utils/compile.js
@@ -0,0 +1,35 @@
+import Vue from 'vue';
+
+export const compile = (tpl, vm) => {
+  let keys = ['methods', 'computed', 'data', 'filters'];
+  let props = {};
+
+  let node = Vue.compile(tpl);
+  keys.forEach(key => {
+    props[key] = vm.$parent.$parent.$options[key];
+
+    if (key === 'data' && typeof props[key] === 'function') {
+      props[key] = props[key]();
+    }
+  });
+
+  let vNode = new Vue({
+    ...props,
+    ...node
+  });
+
+  vNode.$mount();
+  return vNode;
+};
+
+export const mountedVNode = (vn) => {
+  const instance = new Vue({render: (h) => h('div', vn)});
+  instance.$mount();
+  return instance;
+};
+
+export const mountedRenderFn = (renderFn, vueInstance) => {
+  const instance = new Vue({render: h => renderFn(h, vueInstance)});
+  instance.$mount();
+  return instance;
+};
diff --git a/src/components/Amap/utils/convert-helper.js b/src/components/Amap/utils/convert-helper.js
new file mode 100644
index 0000000..6907b0f
--- /dev/null
+++ b/src/components/Amap/utils/convert-helper.js
@@ -0,0 +1,39 @@
+export function toPixel(arr) {
+  return new window.AMap.Pixel(arr[0], arr[1]);
+}
+
+export function toSize(arr) {
+  return new window.AMap.Size(arr[0], arr[1]);
+}
+
+export function pixelTo(pixel) {
+  if (Array.isArray(pixel)) return pixel;
+  return [pixel.getX(), pixel.getY()];
+}
+
+export function toLngLat(arr) {
+  return new window.AMap.LngLat(arr[0], arr[1]);
+}
+
+export function lngLatTo(lngLat) {
+  if (!lngLat) return;
+  if (Array.isArray(lngLat)) return lngLat.slice();
+  return [lngLat.getLng(), lngLat.getLat()];
+}
+
+/**
+ * @param arrs 二重数组 southWest, northEast
+ */
+export function toBounds(arrs) {
+  return new window.AMap.Bounds(toLngLat(arrs[0]), toLngLat(arrs[1]));
+}
+
+export const commonConvertMap = {
+  position: toLngLat,
+  offset: toPixel,
+  bounds: toBounds,
+  LngLat: toLngLat,
+  Pixel: toPixel,
+  Size: toSize,
+  Bounds: toBounds
+};
diff --git a/src/components/Amap/utils/event-helper.js b/src/components/Amap/utils/event-helper.js
new file mode 100644
index 0000000..642c875
--- /dev/null
+++ b/src/components/Amap/utils/event-helper.js
@@ -0,0 +1,58 @@
+let eventHelper;
+class EventHelper {
+  constructor() {
+    /**
+     * listener has表
+     * {
+     *  instance: {
+     *              eventName: [...handlers]
+     *            }
+     * }
+     */
+    this._listener = new Map();
+  }
+
+  addListener(instance, eventName, handler, context) {
+    if (!AMap.event) throw new Error('please wait for Map API load');
+    let listener = AMap.event.addListener(instance, eventName, handler, context);
+    if (!this._listener.get(instance)) this._listener.set(instance, {});
+    let listenerMap = this._listener.get(instance);
+    if (!listenerMap[eventName]) listenerMap[eventName] = [];
+    listenerMap[eventName].push(listener);
+
+  }
+
+  removeListener(instance, eventName, handler) {
+    if (!AMap.event) throw new Error('please wait for Map API load');
+    if (!this._listener.get(instance) || !this._listener.get(instance)[eventName]) return;
+    let listenerArr = this._listener.get(instance)[eventName];
+    if (handler) {
+      let l_index = listenerArr.indexOf(handler);
+      AMap.event.removeListener(listenerArr[l_index]);
+      listenerArr.splice(l_index, 1);
+    } else {
+      listenerArr.forEach(listener => {
+        AMap.event.removeListener(listener);
+      });
+      this._listener.get(instance)[eventName] = [];
+    }
+  }
+  addListenerOnce(instance, eventName, handler, context) {
+    return AMap.event.addListenerOnce(instance, eventName, handler, context);
+  }
+  trigger(instance, eventName, args) {
+    return AMap.event.trigger(instance, eventName, args);
+  }
+
+  clearListeners(instance) {
+    let listeners = this._listener.get(instance);
+    if (!listeners) return;
+    Object.keys(listeners).map(eventName => {
+      this.removeListener(instance, eventName);
+    });
+  }
+};
+
+eventHelper = eventHelper || new EventHelper();
+
+export default eventHelper;