在vue项目的开发过程中,我们会需要用到地图显示功能,那么如何在vue项目中引用百度地图或者谷歌地图呢?下面是我自己在开发过程中的引用方式,如果有更好的方式,欢迎提出。

一、在index.html文件的头部引入地图


其中src是引入地图的url,ak是你在地图官网申请的开发者公钥

二、在webpack.base.conf.js文件中的module.exports添加配置
externals:{
'BMap': 'BMap'
}

三、执行npm install

四、在需要地图的组件内import BMap from 'BMap',在想要显示地图的div中 定义id,接下来只有根据官方文档
      中 的步骤在created中初始化你想要的地图便可,下面是我自己做的小栗子:

            PS:高德地图和百度地图的实现方式基本一致(高德地图的配置是AMap),就看你需求里是要使用哪个咯。