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下插入以下代碼

    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做爲全局對象使用，以便於各組件之間對該地圖對象的複用和傳值，

1. 那麼咱們能夠在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>

2. 接下來在要用到該全局變量的組件中 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>