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

Posted 2022-08-05 lwj-blog

平时一般未用脚手架构建或用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>