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:{  9 'AMap':'AMap' 10 },
   
   
   

   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>