vueロードvue-amapエラー解決方法

main.jsの

//     
import VueAMap from 'vue-amap';
setTimeout(() => {
  localStorage.clear();
  Vue.use(VueAMap);
}, 0);

VueAMap.initAMapApiLoader({
  key: '******',
  plugin: [
    "AMap.Autocomplete", //      
    "AMap.PlaceSearch", //POI    
    "AMap.Scale", //            
    "AMap.OverView", //      
    "AMap.ToolBar", //     
    "AMap.MapType", //      ，          、             
    "AMap.PolyEditor", //      ，  
    "AMap.CircleEditor", //       
    "AMap.Geolocation" //    ，                   
  ],
  //      sdk     1.4.4
  v: '1.4.4'
});
//     

// initSearch        


<template lang="html">
  <div class="container">
      <div class="search-box">
        <input
          v-model="searchKey"
          type="search"
          id="search">
        <button @click="searchByHand">  </button>
        <div class="tip-box" id="searchTip"></div>
      </div>
      <!--
        amap-manager：       
        vid：       ID
        zooms：            ， PC ，    [3,18]，    [3-18]；      ，    [3-19]，    [3-19]
        center：         
        plugin：       
        events：   
      -->
      <el-amap class="amap-box" ref="map"
        :amap-manager="amapManager"
        :vid="'amap-vue'"
        :zoom="zoom"
        :plugin="plugin"
        :center="center"
        :events="events"
      >
        <!--    -->
        <el-amap-marker v-for="(marker, index) in markers" :position="marker" :key="index"></el-amap-marker>
      </el-amap>
    </div>
</template>
<script>

import {AMapManager, lazyAMapApiLoaderInstance} from 'vue-amap'
let amapManager = new AMapManager();

export default {
  data () {
    let self = this
    return {
      address: null,
      searchKey: '',
      amapManager,
      markers: [],
      searchOption: {
        city: '  ',
        citylimit: true
      },
      center: [121.329402, 31.228667],
      zoom: 17,
      lng: 0,
      lat: 0,
      loaded: false,
      events: {
        init (o) {
            console.log(o.getCenter())
            // console.log(this.$refs.map.$$getInstance())
            o.getCity(result => {
                console.log(result)
            })
            lazyAMapApiLoaderInstance.load().then(() => {
                console.log(lazyAMapApiLoaderInstance)
                self.initSearch()
            })
        },
        'moveend': () => {
        },
        'zoomchange': () => {
        },
        //             
        'complete': (o) => {
            console.log(o)
        },
        //          
        click (e) {
          // console.log(e)
          self.markers = []
          let { lng, lat } = e.lnglat
          self.lng = lng
          self.lat = lat
          self.center = [lng, lat]
          self.markers.push([lng, lat])
          //        SDK   。
          let geocoder = new AMap.Geocoder({
            radius: 1000,
            extensions: 'all'
          })
          geocoder.getAddress([lng, lat], function (status, result) {
            if (status === 'complete' && result.info === 'OK') {
              if (result && result.regeocode) {
                console.log(result.regeocode.formattedAddress)
                self.address = result.regeocode.formattedAddress
                self.searchKey = result.regeocode.formattedAddress
                self.$nextTick()
              }
            }
          })
        }
      },
      //       
      plugin: [
        // {
        //   pName: 'Geocoder',
        //   events: {
        //     init (o) {
        //       console.log(o.getAddress())
        //     }
        //   }
        // },
        {
          //   
          pName: 'Geolocation',
          events: {
            init (o) {
              // o           
              o.getCurrentPosition((status, result) => {
                if (result && result.position) {
                  //     
                  self.lng = result.position.lng
                  //     
                  self.lat = result.position.lat
                  //     
                  self.center = [self.lng, self.lat]
                  self.markers.push([self.lng, self.lat])
                  // load
                  self.loaded = true
                  //       
                  self.$nextTick()
                }
              })
            }
          }
        },
        {
          //    
          pName: 'ToolBar',
          events: {
            init (instance) {
              // console.log(instance);
            }
          }
        },
        {
          //   
          pName: 'OverView',
          events: {
            init (instance) {
              // console.log(instance);
            }
          }
        },
        {
          //     
          pName: 'MapType',
          defaultType: 0,
          events: {
            init (instance) {
              // console.log(instance);
            }
          }
        },
        {
          //   
          pName: 'PlaceSearch',
          events: {
            init (instance) {
              // console.log(instance)
            }
          }
        }
      ]
    }
  },
  methods: {
    initSearch () {
      let vm = this
      let map = this.amapManager.getMap();
        
      if(typeof(AMapUI)=='undefined'){
          $.getScript("https://webapi.amap.com/ui/1.0/main.js").done(function (script, textstatus) {
            if (textstatus == "success" && typeof (AMapUI) != undefined) {
                //    AMap   
                vm.amapulload();
            } else {
                alert("      ，     ");
            }
        });
      }else{      
        vm.amapulload()
      }
    },
    amapulload(){
        let vm=this
        let map = this.amapManager.getMap();
        AMapUI.loadUI(['misc/PoiPicker'], function (PoiPicker) {
            var poiPicker = new PoiPicker({
            input: 'search',
            placeSearchOptions: {
                map: map,
                pageSize: 10
            },
            suggestContainer: 'searchTip',
            searchResultsContainer: 'searchTip'
            })
            vm.poiPicker = poiPicker
            //   poi    
            poiPicker.on('poiPicked', function (poiResult) {
            // console.log(poiResult)
            let source = poiResult.source
            let poi = poiResult.item
            if (source !== 'search') {
                poiPicker.searchByKeyword(poi.name)
            } else {
                poiPicker.clearSearchResults()
                vm.markers = []
                let lng = poi.location.lng
                let lat = poi.location.lat
                let address = poi.cityname + poi.adname + poi.name
                vm.center = [lng, lat]
                vm.markers.push([lng, lat])
                vm.lng = lng
                vm.lat = lat
                vm.address = address
                vm.searchKey = address
            }
            })
        })
    },
    searchByHand () {
      if (this.searchKey !== '') {
        this.poiPicker.searchByKeyword(this.searchKey)
      }
    }
  },
    mounted() {
        
    }
}
</script>
<style lang="css">
.container {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate3d(-50%, -50%, 0);
  border: 1px solid #999;
}
.search-box {
  position: absolute;
  z-index: 5;
  width: 70%;
  left: 13%;
  top: 10px;
  height: 30px;
}
.search-box input {
  float: left;
  width: 80%;
  height: 100%;
  border: 1px solid #30ccc1;
  padding: 0 8px;
  outline: none;
}
.search-box button {
  float: left;
  width: 20%;
  height: 100%;
  background: #30ccc1;
  border: 1px solid #30ccc1;
  color: #fff;
  outline: none;
}
.tip-box {
  width: 100%;
  max-height:260px;
  position: absolute;
  top: 30px;
  overflow-y: auto;
  background-color: #fff;
}
</style>