Vue中引入高德地图cdn链接方式汇总（可按需加载）

随着时间流逝，人的初心是否会改变呢？今日博客分享vue引入高德地图几种方式~

1、方式一，引用封装好的vue-amap组件，具体操作见官方文档

官网链接：https://elemefe.github.io/vue-amap/#/zh-cn/introduction/install

npm install vue-amap --save

由于vue-amap封装的功能有限，因此不可避免的需要引入高德地图的cdn链接

2、网上已经普遍有一种引入方式，具体如下

（1）进入当前vue目录下的index.html直接引入cdn链接

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>test</title>
    <!--高德地图js-->
    <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.14&key=您申请的key值&callback=onLoad"></script>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

（2）配置build/webpack.base.conf.js,在module.export中加入externals配置项，当做外部资源引入，据说有如下注释的功能，但是在开发环境貌似感觉没啥区别。。。

  externals:{
    "AMap":'AMap'
//key是项目内使用组件的名称，value是高德对外暴露的名称（这样配置的话webpack在dev run dev或者run build的时候就不会去本地组件包查找该资源，而是直接去windown域下载）
  },

3、上面的方式网页一进入index.html文件，高德地图资源便会进行加载，那么问题来了，当我页面只有一个组件需要用到高德地图，想实现只有进入到某个特定组件时，才请求高德地图cdn链接，如何做到按需加载呢?经过尝试有以下两种方法

方法一：通过引入webpack-require-http插件配合require引入，注意2.1版本require(['']，function(){})是异步加载，之前 require('') 同步加载，同步加载一直加载报错，最终实现如下

（1）引入webpack-require-http插件，还是当做外部资源引入这个插件，配置build/webpack.base.conf.js,在module.export中加入externals配置项

  externals:[
    //注意这里是[]
    require('webpack-require-http')
  ]

（2）vue文件中引入

<template>
  <div>
    <button @click="getMap">获取map对象</button>
    <div id="map" style="width:100%;height:800px"></div>
  </div>
</template>
<script>
  // import AMap from 'AMap'
  export default {
    data() {
      return {
        mapObj: null
      }
    },
    methods: {
      getMap() {
        console.log("this map obj", this.mapObj);
      }
    },
    beforeMount() {
      require(["https://webapi.amap.com/maps?v=1.4.14&key=您申请的key值"],()=>{
         setTimeout(()=>{
          var map = new AMap.Map('map', {
          resizeEnable: true, //是否监控地图容器尺寸变化
          zoom: 11, //初始化地图层级
          center: [116.397428, 39.90923] //初始化地图中心点
          });
         },1500);
      })
    },
    destroyed(){
      console.log("destroyed");
    }
  }
</script>

方法二：动态的给index.html头部加入高德地图资源

（1）直接在组件内部引入即可，一步操作即可实现

<template>
  <div>
    <button @click="getMap">获取map对象</button>
    <div id="map" style="width:100%;height:800px"></div>
  </div>
</template>
<script>
  // import AMap from 'AMap'
  export default {
    data() {
      return {
        mapObj: null
      }
    },
    methods: {
      getMap() {
        console.log("this map obj", this.mapObj);
      }
    },
    mounted() {
    },
    beforeMount() {
      let $self = this;
      window.onLoad = function () {
        var map = new AMap.Map('map', {
          resizeEnable: true, //是否监控地图容器尺寸变化
          zoom: 11, //初始化地图层级
          center: [116.397428, 39.90923] //初始化地图中心点
        });
        AMap.plugin('AMap.ToolBar', function () {//异步加载插件
          var toolbar = new AMap.ToolBar();
          map.addControl(toolbar);
        });
        $self.mapObj = map;
      }
      var url = 'https://webapi.amap.com/maps?v=1.4.14&key=您申请的key值&callback=onLoad';
      var jsapi = document.createElement('script');
      jsapi.charset = 'utf-8';
      jsapi.src = url;
      jsapi.id = "amapjs";
      document.head.appendChild(jsapi);
    },
    destroyed() {
      document.getElementsByTagName("head")[0].removeChild(             
      document.getElementById("amapjs"));
      console.log("destroyed");
    }
  }

以上方法在进入引用的组件时候才会加载出高德地图，在vue上面引入插件，建议通过异步加载插件引入，由于是操作到了index.html高德地图已经出现就会保留，只有页面刷新时候index.html头部资源才会消失，因此若是想实现跳出组件地图实时删除请在vue声明周期destroy中进一步操作。