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>