Gaode map uses vue-amap development page to refresh the map blank

When using vue-amap map development, the map will not be displayed after refreshing the page. Because AMapUI is not loaded when refreshing, the map display is blank.

Use remoteLoad to solve

// remoteLoad.js
export default function remoteLoad(url, hasCallback) {
    
    
  return createScript(url)
  /**
   * 创建script
   * @param url
   * @returns {Promise}
   */
  function createScript(url) {
    
    
    var scriptElement = document.createElement('script')
    document.body.appendChild(scriptElement)
    var promise = new Promise((resolve, reject) => {
    
    
      scriptElement.addEventListener('load', e => {
    
    
        removeScript(scriptElement)
        if (!hasCallback) {
    
    
          resolve(e)
        }
      }, false)
 
      scriptElement.addEventListener('error', e => {
    
    
        removeScript(scriptElement)
        reject(e)
      }, false)
 
      if (hasCallback) {
    
    
        window.____callback____ = function() {
    
    
          resolve()
          window.____callback____ = null
        }
      }
    })
 
    if (hasCallback) {
    
    
      url += '&callback=____callback____'
    }
 
    scriptElement.src = url
 
    return promise
  }
 
  /**
   * 移除script标签
   * @param scriptElement script dom
   */
  function removeScript(scriptElement) {
    
    
    document.body.removeChild(scriptElement)
  }
}

<template>
  <div class="container">
    <el-amap :amap-manager="amapManager" :events="events" :center="center" :zoom="zoom" :plugin="plugin" />
  </div>
</template>

<script>
import remoteLoad from '@/utils/remoteload.js'
import {
    
     AMapManager, lazyAMapApiLoaderInstance } from 'vue-amap'
const amapManager = new AMapManager() // 新建生成地图画布
export default {
    
    
  data() {
    
    
    const self = this
    return {
    
    
      map: null,
      amapManager,
      marker: null,
      events: {
    
    
        init(o) {
    
    
          lazyAMapApiLoaderInstance.load().then(() => {
    
    
            self.initMap()
          })
        },
      },
      center: [121.472644, 31.231706],
      zoom: 4,
      plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor', 'AMap.Geocoder', 'AMap.Geolocation', 'AMap.InfoWindow'],
    }
  },
  created() {
    
    
    // 已载入高德地图API，则直接初始化地图
    if (window.AMap && window.AMapUI) {
    
    
      this.initMap()
      // 未载入高德地图API，则先载入API再初始化
    } else {
    
    
      // 载入高德地图和UI组件
      // eslint-disable-next-line no-undef
      Promise.all([remoteLoad(`http://webapi.amap.com/maps?v=1.4.17&key=[你的高德地图key]`), remoteLoad('http://webapi.amap.com/ui/1.0/main.js')]).then(() => {
    
    
        this.initMap()
      })
    }
  },
  mounted() {
    
    
  },
  methods: {
    
    
    // 初始化地图
    initMap() {
    
    
      const map = amapManager.getMap()
      this.map = map
    },
  },
}
</script>