# 寮曞叆楂樺痉 UI 缁勪欢搴�

鏀寔寮曞叆楂樺痉 UI 缁勪欢搴擄紝濡備笅锛屽彧闇€鍦ㄥ垵濮嬪寲鐨勬椂鍊欐坊鍔� `uiVersion` 鐨勮剼鏈増鏈彿锛屽氨鑳借交鏉惧畬鎴愯剼鏈殑鍔犺浇鍙婂垵濮嬪寲锛岀増鏈彿鍙傝€僛瀹樻柟浠嬬粛](http://lbs.amap.com/api/javascript-api/guide/amap-ui/intro)

  娉細瀹樻柟缁勪欢搴撳嚭鏉ヤ笉涔咃紝鏆傛椂涓嶄細灏佽銆�

```javascript
VueAMap.initAMapApiLoader({
  key: 'YOUR_KEY',
  plugin: ['AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType',...],
  uiVersion: '1.0.11' // 鐗堟湰鍙�
});
```

## 浣跨敤缁勪欢
<vuep template="#example"></vuep>

## 浠呬娇鐢ㄥ垵濮嬪寲鑴氭湰
<vuep template="#example2"></vuep>

<script v-pre type="text/x-template" id="example">

  <template>
    <div class="amap-page-container">
      <el-amap vid="amapDemo"  :center="center" :map-manager="amapManager" :zoom="zoom" :events="events" class="amap-demo">
      </el-amap>
    </div>
  </template>

  <style>
    .amap-demo {
      height: 300px;
    }
  </style>
  <script>
    // NPM 鏂瑰紡
    // import { AMapManager } from 'vue-amap';
    // CDN 鏂瑰紡
    let amapManager = new VueAMap.AMapManager();
    module.exports = {
      data: function() {
        return {
          zoom: 12,
          center: [121.59996, 31.197646],
          amapManager,
          events: {
            init(map) {
              AMapUI.loadUI(['overlay/SimpleMarker'], function(SimpleMarker) {
                const marker = new SimpleMarker({
                  iconLabel: 'A',
                  iconStyle: 'red',
                  map: map,
                  position: map.getCenter()
                });
              });
            }
          }
        };
      }
    };
  </script>

</script>


<script v-pre type="text/x-template" id="example2">
  <template>
    <div id="amap-demo1" class="amap-demo">
    </div>
  </template>
  <style>
    #amap-demo1 {
      height: 300px;
    }
  </style>
  <script>
    // NPM 鏂瑰紡
    // import { lazyAMapApiLoaderInstance } from 'vue-amap';
    // CDN 鏂瑰紡
    const loadPromise = window.VueAMap.lazyAMapApiLoaderInstance.load()
    module.exports = {
      mounted() {
        loadPromise.then(() => {
          console.log('-----')
          this.map = new AMap.Map('amap-demo1', {
            center: [121.59996, 31.197646],
            zoom: 12
          })
          AMapUI.loadUI(['overlay/SimpleMarker'], (SimpleMarker) => {
            const marker = new SimpleMarker({
              iconLabel: 'A',
              iconStyle: 'red',
              map: this.map,
              position: this.map.getCenter()
            });
          });
        })
      }
    };
  </script>

</script>