一、安装
$ npm install vue-baidu-map --save
二、注册
注册的方式有两种 : 全局注册 & 局部注册 ,各位可以根据自己的需求来选择,我个人采用的是局部注册,按需加载。个人注册了一个公共的MapView.vue组件来实现地图的功能,存放在项目组件库components/common下。
官方文档描述1:局部注册的 BaiduMap 组件必须声明 ak 属性。
注: 这个ak指的是你的百度地图开放平台获取到的秘钥
官方文档描述2:所有的独立组件均存放在 vue-baidu-map/components 文件夹下,按需引用即可。
刚开始,我就是被这句话给迷惑了,由于没认真看文档,又看到代码,傻傻的去组件库components中新建了一个vue-baidu-map文件夹,然后去注册了一个Map.vue的组件。
No~No~No~ 不是这样的。注意:这里指的是vue-baid-map文件夹下的components组件库,而不是我们项目中自己创建的components组件库,不要跟我一样犯傻。
在安装完vue-baidu-map后,在node_modules中会有一个vue-baidu-map文件夹,我们现在来找到它,它的结构是这样的:
vue-baidu-map
|__ .github
|__ build
|__ components
|__ test
|__ types
看到了吗? 这里有个components组件库,而官方描述中叫我们引入的是这个文件下的独立组件。
三、实现
现在我们来看看代码。
在个人注册的组件MapView.vue中来实现地图功能,
.map {
width: 100%;
height: 500px; //必须给容器指高度,要不然地图将显示在一个高度为0的容器中,自然看不到
/deep/ .anchorBL { //隐藏左下角百度地图logo
display: none;
}
}
实现的效果图:
文章内容就到此结束了。有什么不对的地方、不同的意见或者建议可以在评论区告知。