vue-cli2.X中引入高德地图，将其设为全局对象

平时一般未用脚手架构建或用webpack构建的项目只要用script标签引入即可，在vue-cli 2.X构建的项目中，需要用如下方式引入高德地图：

1. 首先在高德地图开放平台中注册开发者账号并获取key，传送门：https://lbs.amap.com/api/javascript-api/guide/abc/prepare
2. 接下来在cli项目根目录下的index.html中的<header>标签中用script标签引入

   <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值"></script> 

3. 这一步做好了ok 下一步就是在build目录下找到webpack.base.conf.js下插入如下代码

      output: {
        path: config.build.assetsRoot,
        filename: '[name].js',
        publicPath: process.env.NODE_ENV === 'production'
          ? config.build.assetsPublicPath
          : config.dev.assetsPublicPath
      },
      externals:{
        'AMap':'AMap'
      },
   
   

   4.下一步，在你要放地图的组件里设置一个存放地图的container，按照高德地图JS API的照做就可以了

TIP：我们经常有时候要把map作为全局对象使用，以便于各组件之间对该地图对象的复用和传值，

1. 那么我们可以在src目录下新建一个global.vue作为全局组件来设置全局变量，在global.vue中定义：

    <template>
    </template>
   
    <script>
        const map = '';
        export default {
            map,
        }
    </script>
   
    <style>
    </style>

2. 接下来在要用到该全局变量的组件中 import 使用即可

    <script>
        import global from '@/global.vue';
        export default {
            data() {
                return {
   
                }
            },
   
            mounted() {
                console.log("全局变量" + global.map);
   
            },
    <script>