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

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

首先在高德地图开放平台中注册开发者账号并获取key，传送门：https://lbs.amap.com/api/javascript-api/guide/abc/prepare

接下来在cli项目根目录下的index.html中的<header>标签中用script标签引入

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

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

 1   output: {
 2     path: config.build.assetsRoot,
 3     filename: '[name].js',
 4     publicPath: process.env.NODE_ENV === 'production'
 5       ? config.build.assetsPublicPath
 6       : config.dev.assetsPublicPath
 7   },
 8   externals:{
 9     'AMap':'AMap'
10   },

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

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

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

 1 <template>
 2 </template>
 3 
 4 <script>
 5     const map = '';
 6     export default {
 7         map,
 8     }
 9 </script>
10 
11 <style>
12 </style>

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

 1 <script>
 2     import global from '@/global.vue';
 3     export default {
 4         data() {
 5             return {
 6 
 7             }
 8         },
 9 
10         mounted() {
11             console.log("全局变量" + global.map);
12 
13         },
14 <script>