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