diff --git a/examples/point/chart/demo/bar.js b/examples/point/chart/demo/bar.js
index 05c16e3507..3bca7f7451 100644
--- a/examples/point/chart/demo/bar.js
+++ b/examples/point/chart/demo/bar.js
@@ -11,10 +11,10 @@ const scene = new Scene({
     zoom: 4.19
   })
 });
+addChart();
 scene.render();
-scene.on('loaded', () => {
-  addChart();
-});
+
+
 function addChart() {
   fetch(
     'https://gw.alipayobjects.com/os/basement_prod/0b96cca4-7e83-449a-93d0-2a77053e74ab.json'
@@ -67,14 +67,14 @@ function addChart() {
           .color('item', [ '#5CCEA1', '#5D7092', '#5B8FF9' ])
           .opacity(1);
         chart.render();
-        new Marker({
+        const marker = new Marker({
           element: el
         })
           .setLnglat({
             lng: item.coordinates[0],
             lat: item.coordinates[1]
-          })
-          .addTo(scene);
+          });
+        scene.addMarker(marker);
       });
     });
 }
diff --git a/examples/point/chart/demo/chart.js b/examples/point/chart/demo/chart.js
index abe7a089fb..4cd14788b1 100644
--- a/examples/point/chart/demo/chart.js
+++ b/examples/point/chart/demo/chart.js
@@ -11,10 +11,9 @@ const scene = new Scene({
     zoom: 4.19
   })
 });
+addChart();
 scene.render();
-scene.on('loaded', () => {
-  addChart();
-});
+
 function addChart() {
   fetch(
     'https://gw.alipayobjects.com/os/basement_prod/0b96cca4-7e83-449a-93d0-2a77053e74ab.json'
@@ -89,14 +88,14 @@ function addChart() {
           .color('item', [ '#5CCEA1', '#5D7092', '#5B8FF9' ])
           .shape('sliceShape');
         chart.render();
-        new Marker({
+        const marker = new Marker({
           element: el
         })
           .setLnglat({
             lng: item.coordinates[0],
             lat: item.coordinates[1]
-          })
-          .addTo(scene);
+          });
+        scene.addMarker(marker);
       });
     });
 }
diff --git a/examples/point/chart/demo/ring.js b/examples/point/chart/demo/ring.js
index 9dbad9079b..51a59854b8 100644
--- a/examples/point/chart/demo/ring.js
+++ b/examples/point/chart/demo/ring.js
@@ -44,69 +44,66 @@ const scene = new Scene({
     zoom: 3.802
   })
 });
-scene.render();
-scene.on('loaded', () => {
-  Promise.all([
-    fetch(
-      'https://gw.alipayobjects.com/os/basement_prod/5b772136-a1f4-4fc5-9a80-9f9974b4b182.json'
-    ).then(d => d.json()),
-    fetch(
-      'https://gw.alipayobjects.com/os/basement_prod/f3c467a4-9ae0-4f08-bb5f-11f9c869b2cb.json'
-    ).then(d => d.json())
-  ]).then(function onLoad([ center, population ]) {
-    const popobj = {};
-    population.forEach(element => {
-      popobj[element.Code] =
-        element['Population, female (% of total) (% of total)'];
-    });
-    // 数据绑定
+Promise.all([
+  fetch(
+    'https://gw.alipayobjects.com/os/basement_prod/5b772136-a1f4-4fc5-9a80-9f9974b4b182.json'
+  ).then(d => d.json()),
+  fetch(
+    'https://gw.alipayobjects.com/os/basement_prod/f3c467a4-9ae0-4f08-bb5f-11f9c869b2cb.json'
+  ).then(d => d.json())
+]).then(function onLoad([ center, population ]) {
+  const popobj = {};
+  population.forEach(element => {
+    popobj[element.Code] =
+      element['Population, female (% of total) (% of total)'];
+  });
+  // 数据绑定
 
-    center.features = center.features.map(fe => {
-      fe.properties.female = popobj[fe.properties.id] * 1 || 0;
-      return fe;
+  center.features = center.features.map(fe => {
+    fe.properties.female = popobj[fe.properties.id] * 1 || 0;
+    return fe;
+  });
+  center.features.forEach(point => {
+    const el = document.createElement('div');
+    const coord = point.geometry.coordinates;
+    const v = point.properties.female * 1;
+    if (v < 1 || (v > 46 && v < 54)) { return; }
+    const size = 60;
+    const data = [
+      {
+        type: '男性',
+        value: 100.0 - v.toFixed(2)
+      },
+      {
+        type: '女性',
+        value: v.toFixed(2) * 1
+      }
+    ];
+    const chart = new G2.Chart({
+      container: el,
+      width: size,
+      height: size,
+      render: 'svg',
+      padding: 0
     });
-    center.features.forEach(point => {
-      const el = document.createElement('div');
-      const coord = point.geometry.coordinates;
-      const v = point.properties.female * 1;
-      if (v < 1 || (v > 46 && v < 54)) { return; }
-      const size = 60;
-      const data = [
-        {
-          type: '男性',
-          value: 100.0 - v.toFixed(2)
-        },
-        {
-          type: '女性',
-          value: v.toFixed(2) * 1
-        }
-      ];
-      const chart = new G2.Chart({
-        container: el,
-        width: size,
-        height: size,
-        render: 'svg',
-        padding: 0
-      });
-      chart.source(data);
-      chart.legend(false);
-      chart.tooltip(false);
-      chart.coord('theta', {
-        radius: 0.9,
-        innerRadius: 0.6
-      });
-      chart
-        .intervalStack()
-        .position('value')
-        .color('type', [ '#5CCEA1', '#5B8FF9' ])
-        .opacity(1);
-      chart.render();
-      new Marker({ element: el })
-        .setLnglat({
-          lng: coord[0],
-          lat: coord[1]
-        })
-        .addTo(scene);
+    chart.source(data);
+    chart.legend(false);
+    chart.tooltip(false);
+    chart.coord('theta', {
+      radius: 0.9,
+      innerRadius: 0.6
     });
+    chart
+      .intervalStack()
+      .position('value')
+      .color('type', [ '#5CCEA1', '#5B8FF9' ])
+      .opacity(1);
+    chart.render();
+    const marker = new Marker({ element: el })
+      .setLnglat({
+        lng: coord[0],
+        lat: coord[1]
+      });
+    scene.addMarker(marker);
   });
 });
diff --git a/examples/point/marker/demo/marker.js b/examples/point/marker/demo/marker.js
index fa523846d8..7d3a074725 100644
--- a/examples/point/marker/demo/marker.js
+++ b/examples/point/marker/demo/marker.js
@@ -10,10 +10,9 @@ const scene = new Scene({
     zoom: 4
   })
 });
+addMarkers();
 scene.render();
-scene.on('loaded', () => {
-  addMarkers();
-});
+
 
 function addMarkers() {
   fetch(
@@ -28,11 +27,11 @@ function addMarkers() {
         el.textContent = nodes[i].v + '℃';
         el.style.background = getColor(nodes[i].v);
         el.style.borderColor = getColor(nodes[i].v);
-        new Marker({
+        const marker = new Marker({
           element: el
         })
-          .setLnglat({ lng: nodes[i].x * 1, lat: nodes[i].y })
-          .addTo(scene);
+          .setLnglat({ lng: nodes[i].x * 1, lat: nodes[i].y });
+        scene.addMarker(marker);
       }
     });
 }
diff --git a/examples/tutorial/marker/demo/amap.js b/examples/tutorial/marker/demo/amap.js
index 4c220d00df..c55ebbdf66 100644
--- a/examples/tutorial/marker/demo/amap.js
+++ b/examples/tutorial/marker/demo/amap.js
@@ -1,8 +1,8 @@
 import { Scene, Marker, Popup } from '@antv/l7';
-import { GaodeMap } from '@antv/l7-maps';
+import { Mapbox } from '@antv/l7-maps';
 const scene = new Scene({
   id: 'map',
-  map: new GaodeMap({
+  map: new Mapbox({
     style: 'light',
     pitch: 0,
     center: [ 121.4316962, 31.26082325 ],
diff --git a/packages/component/package.json b/packages/component/package.json
index e72dd477f2..1a8afef44f 100644
--- a/packages/component/package.json
+++ b/packages/component/package.json
@@ -33,7 +33,7 @@
     "inversify-logging": "^0.2.1",
     "load-styles": "^2.0.0"
   },
-  "gitHead": "b1c276cf31af546141b35a2b7e13e8d290f2f300",
+  "gitHead": "5360c93be63ef4d8d580ca9fafd8fb05cb5fbe30",
   "publishConfig": {
     "access": "public"
   }
diff --git a/packages/core/package.json b/packages/core/package.json
index 9601a2ee6b..f8330a5b32 100644
--- a/packages/core/package.json
+++ b/packages/core/package.json
@@ -43,7 +43,7 @@
     "@types/lodash": "^4.14.138",
     "@types/viewport-mercator-project": "^6.1.0"
   },
-  "gitHead": "b1c276cf31af546141b35a2b7e13e8d290f2f300",
+  "gitHead": "5360c93be63ef4d8d580ca9fafd8fb05cb5fbe30",
   "publishConfig": {
     "access": "public"
   }
diff --git a/packages/core/src/services/component/MarkerService.ts b/packages/core/src/services/component/MarkerService.ts
index 6ae5995f26..e742bef00c 100644
--- a/packages/core/src/services/component/MarkerService.ts
+++ b/packages/core/src/services/component/MarkerService.ts
@@ -11,11 +11,11 @@ export default class MarkerService implements IMarkerService {
   private markers: IMarker[] = [];
   private unAddMarkers: IMarker[] = [];
   public addMarker(marker: IMarker): void {
-    if (!this.mapsService.map) {
-      this.unAddMarkers.push(marker);
-    } else {
+    if (!this.mapsService.map && this.mapsService.getMarkerContainer()) {
       this.markers.push(marker);
       marker.addTo(this.scene);
+    } else {
+      this.unAddMarkers.push(marker);
     }
   }
   public addMarkers(): void {
diff --git a/packages/l7/package.json b/packages/l7/package.json
index fbb87b80d8..b93513b30d 100644
--- a/packages/l7/package.json
+++ b/packages/l7/package.json
@@ -29,7 +29,7 @@
     "@antv/l7-maps": "^2.0.0-beta.11",
     "@antv/l7-scene": "^2.0.0-beta.11"
   },
-  "gitHead": "b1c276cf31af546141b35a2b7e13e8d290f2f300",
+  "gitHead": "5360c93be63ef4d8d580ca9fafd8fb05cb5fbe30",
   "publishConfig": {
     "access": "public"
   }
diff --git a/packages/layers/package.json b/packages/layers/package.json
index 5ab0c52995..fc97fc78fa 100644
--- a/packages/layers/package.json
+++ b/packages/layers/package.json
@@ -49,7 +49,7 @@
     "@types/gl-matrix": "^2.4.5",
     "@types/lodash": "^4.14.138"
   },
-  "gitHead": "b1c276cf31af546141b35a2b7e13e8d290f2f300",
+  "gitHead": "5360c93be63ef4d8d580ca9fafd8fb05cb5fbe30",
   "publishConfig": {
     "access": "public"
   }
diff --git a/packages/maps/package.json b/packages/maps/package.json
index e528a8e8cd..1473aea64d 100644
--- a/packages/maps/package.json
+++ b/packages/maps/package.json
@@ -36,7 +36,7 @@
     "@types/mapbox-gl": "^0.54.3",
     "@types/viewport-mercator-project": "^6.1.0"
   },
-  "gitHead": "b1c276cf31af546141b35a2b7e13e8d290f2f300",
+  "gitHead": "5360c93be63ef4d8d580ca9fafd8fb05cb5fbe30",
   "publishConfig": {
     "access": "public"
   }
diff --git a/packages/renderer/package.json b/packages/renderer/package.json
index a63817bbb0..847b189315 100644
--- a/packages/renderer/package.json
+++ b/packages/renderer/package.json
@@ -30,7 +30,7 @@
     "reflect-metadata": "^0.1.13",
     "regl": "^1.3.11"
   },
-  "gitHead": "b1c276cf31af546141b35a2b7e13e8d290f2f300",
+  "gitHead": "5360c93be63ef4d8d580ca9fafd8fb05cb5fbe30",
   "publishConfig": {
     "access": "public"
   }
diff --git a/packages/scene/package.json b/packages/scene/package.json
index 9e3b2e45db..957031de1e 100644
--- a/packages/scene/package.json
+++ b/packages/scene/package.json
@@ -32,7 +32,7 @@
     "mapbox-gl": "^1.2.1",
     "reflect-metadata": "^0.1.13"
   },
-  "gitHead": "b1c276cf31af546141b35a2b7e13e8d290f2f300",
+  "gitHead": "5360c93be63ef4d8d580ca9fafd8fb05cb5fbe30",
   "publishConfig": {
     "access": "public"
   }
diff --git a/packages/source/package.json b/packages/source/package.json
index a2a8e1a927..b8ab49364e 100644
--- a/packages/source/package.json
+++ b/packages/source/package.json
@@ -49,7 +49,7 @@
     "@types/lodash": "^4.14.138",
     "@types/viewport-mercator-project": "^6.1.0"
   },
-  "gitHead": "b1c276cf31af546141b35a2b7e13e8d290f2f300",
+  "gitHead": "5360c93be63ef4d8d580ca9fafd8fb05cb5fbe30",
   "publishConfig": {
     "access": "public"
   }
diff --git a/packages/utils/package.json b/packages/utils/package.json
index 915840d87c..dfc781ba1f 100644
--- a/packages/utils/package.json
+++ b/packages/utils/package.json
@@ -36,7 +36,7 @@
     "@types/gl-matrix": "^2.4.5",
     "@types/lodash": "^4.14.138"
   },
-  "gitHead": "b1c276cf31af546141b35a2b7e13e8d290f2f300",
+  "gitHead": "5360c93be63ef4d8d580ca9fafd8fb05cb5fbe30",
   "publishConfig": {
     "access": "public"
   }
diff --git a/stories/Components/components/Marker.tsx b/stories/Components/components/Marker.tsx
index fc99f2d652..790280109b 100644
--- a/stories/Components/components/Marker.tsx
+++ b/stories/Components/components/Marker.tsx
@@ -1,6 +1,6 @@
 // @ts-ignore
 import { Marker, PolygonLayer, Scene } from '@antv/l7';
-import { Mapbox } from '@antv/l7-maps';
+import { Mapbox, GaodeMap } from '@antv/l7-maps';
 import * as React from 'react';
 
 export default class MarkerComponent extends React.Component {
@@ -18,7 +18,7 @@ export default class MarkerComponent extends React.Component {
     const scene = new Scene({
       id: 'map',
       map: new Mapbox({
-        style: 'mapbox://styles/mapbox/streets-v9',
+        style: 'dark',
         center: [110.19382669582967, 30.258134],
         pitch: 0,
         zoom: 3,
@@ -43,14 +43,12 @@ export default class MarkerComponent extends React.Component {
         opacity: 0.3,
       });
     scene.addLayer(layer);
-    scene.on('loaded', () => {
-      new Marker()
-        .setLnglat({
-          lng: 120.19382669582967,
-          lat: 30.258134,
-        })
-        .addTo(scene);
+    const marker = new Marker().setLnglat({
+      lng: 120.19382669582967,
+      lat: 30.258134,
     });
+
+    scene.addMarker(marker);
   }
 
   public render() {
diff --git a/stories/Components/components/Popup.tsx b/stories/Components/components/Popup.tsx
index 4863381c90..0fc5175c85 100644
--- a/stories/Components/components/Popup.tsx
+++ b/stories/Components/components/Popup.tsx
@@ -43,17 +43,16 @@ export default class PopupComponent extends React.Component {
         opacity: 0.3,
       });
     scene.addLayer(layer);
-    scene.on('loaded', () => {
-      new Popup({
-        offsets: [0, 20],
+    const popup = new Popup({
+      offsets: [0, 20],
+    })
+      .setLnglat({
+        lng: 120.19382669582967,
+        lat: 30.258134,
       })
-        .setLnglat({
-          lng: 120.19382669582967,
-          lat: 30.258134,
-        })
-        .setText('hello')
-        .addTo(scene);
-    });
+      .setText('hello');
+    scene.addPopup(popup);
+
   }
 
   public render() {
diff --git a/stories/Components/components/Scale.tsx b/stories/Components/components/Scale.tsx
index e9893ee812..dcc52eebb6 100644
--- a/stories/Components/components/Scale.tsx
+++ b/stories/Components/components/Scale.tsx
@@ -43,10 +43,9 @@ export default class ScaleComponent extends React.Component {
         opacity: 0.3,
       });
     scene.addLayer(layer);
-    scene.on('loaded', () => {
-      const scaleControl = new Scale();
-      scene.addControl(scaleControl);
-    });
+
+    const scaleControl = new Scale();
+    scene.addControl(scaleControl);
   }
 
   public render() {
diff --git a/stories/Components/components/Zoom.tsx b/stories/Components/components/Zoom.tsx
index b749f9954c..098f2ff798 100644
--- a/stories/Components/components/Zoom.tsx
+++ b/stories/Components/components/Zoom.tsx
@@ -44,12 +44,10 @@ export default class ZoomComponent extends React.Component {
         opacity: 0.3,
       });
     scene.addLayer(layer);
-    scene.on('loaded', () => {
-      const zoomControl = new Zoom({
-        position: 'bottomright',
-      });
-      scene.addControl(zoomControl);
+    const zoomControl = new Zoom({
+      position: 'bottomright',
     });
+    scene.addControl(zoomControl);
   }
 
   public render() {