在vue项目的开发过程中,我们会需要用到地图显示功能,那么如何在vue项目中引用百度地图或者谷歌地图呢?下面是我自己在开发过程中的引用方式,如果有更好的方式,欢迎提出。
一、在index.html文件的头部引入地图
<!--百度地图-->
<script src="url?v=2.0&ak=xxxxxxxx" type="text/javascript"></script>
其中src是引入地图的url,ak是你在地图官网申请的开发者公钥
二、在webpack.base.conf.js文件中的module.exports添加配置
externals:{
'BMap': 'BMap'
}
三、执行npm install
四、在需要地图的组件内import BMap from 'BMap',在想要显示地图的div中 定义id,接下来只有根据官方文档
中 的步骤在created中初始化你想要的地图便可,下面是我自己做的小栗子:
PS:高德地图和百度地图的实现方式基本一致(高德地图的配置是AMap),就看你需求里是要使用哪个咯。
转载于:https://blog.51cto.com/13561893/2061487