在vue2中使用百度或者谷歌地图

Posted 2020-10-21

在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），就看你需求里是要使用哪个咯。