vue中对于高德地图API的调用、js封装以及刷新后地图不显示为空白的原因

vue中使用高德地图

注意点：
1.使用地图必须定义容器大小，长宽固定
2.key值需自行申请key申请地址

1. 在要绘制地图的页面，创建一个主体容器，并定义id

<template>
	<div id="Maps" class="Maps"></div>
</template>

2. 定义容器宽高

<style>
.Maps{
        height: 350px;
        width: 550px;
    }
</style>

函数封装和调用

3. 下面进行地图函数的封装和调用
   （1）首先在src文件夹下创建一个utils文件夹，在该文件夹下存放utilMap.js文件
   
   之后开始编写该文件下的内容，封装异步加载地图的函数，并且刷新后地图不显示为空白的原因也在其中

// 异步加载高德地图
export default {
    loadMap (v = '1.4.15',
             key = '你申请的key值') {
        return new Promise(function (resolve, reject) {
            let hasLoaded = document.getElementById("amap");
            if(hasLoaded) { // 只加载一次
                //如果版本一致则直接返回，避免重复请求
                if(hasLoaded._version === v && hasLoaded._key === key){
                    resolve(window.AMap);
                    return;
                }
                document.head.removeChild(hasLoaded);
            }
            let script = document.createElement('script');
            script.type = 'text/javascript';
            script.id = "amap";
            script.src = `https://webapi.amap.com/maps?v=${v}&key=${key}&callback=initAMap`;
            //此处若缺失callback，则页面在刷新后地图会变为空白不显示
            script.onerror = reject;
            script._version = v;
            script._key = key;
            document.head.appendChild(script)
            window.initAMap = () => {
                resolve(window.AMap)
            }
        });
    },
}

（2）第二步，在src文件夹下再次创建一个core文件夹，里面新建一个use.js文件

然后我们开始写这个文件下的内容，就是引入url

import Vue from 'vue';
import mapUtil from "../utils/mapUtil";

//url
Vue.prototype.$mapUtil = mapUtil;

（3）第三步，将创建的use.js文件在main.js里申明，毕竟vue的命根子在这里

import Vue from 'vue'
import App from './App.vue'
import {router} from './router/index'
import './core/use'

Vue.config.productionTip = false

（4）第四步，在主文件夹下创建vue.config.js文件，该文件需要手动创建

内容配置为：

module.exports = {
    devServer: {
        port: 8080 //端口号配置
    },
    configureWebpack: {
        externals: {
            'AMap':'AMap' //高德地图配置
        }
    }
}

（5）第五步，就可以在所需要的页面配合绘制地图函数直接调用啦，完成前四步以后，下次调用地图就可以直接跳过了！！！

<script>
export default {
  name: 'Map',
  mounted() {
    let self = this;
    setTimeout(function () {
      self.initMap();
    },800) //延时加载地图，保证数据获取成功
  },
  methods:{
    initMap(){
      this.$mapUtil.loadMap('2.0').then(AMap =>{
        this.map = new AMap.Map('maps', {
          zoom: 3,
          center: [120, 40], //初始化地图中心点
          resizeEnable: true
        })
      }).catch(()=>{
        console.log('地图加载失败！')
      })
    },

  }
}
</script>