在vue项目中使用百度地图vue-baidu-map

在vue中使用百度地图，我们可以使用vue-baidu-map。

首先，我们使用npm安装一下这个组件。

npm install vue-baidu-map --save

1、我们选择在main.js里面注册和使用，则使用

main.js

2、也可以只在页面局部

import { BaiduMap} from 'vue-baidu-map';

组件标签

注意：百度地图组件必须给它设置宽高，否则无法显示

样式

在百度地图中，我们需要设置它默认的一些属性

center：中心位置

zoom：地图缩放级别

例如：

一、在地图上添加标注物：点：marker，如果有多个点，则循环bm-marker即可。

其它的可以看官方文档介绍即可：

vue-baidu-map的api地址在这里：https://dafrok.github.io/vue-baidu-map/#/zh/index

该组件使用很简单，但值得注意的是，为了避免重复注册地图，我们可以将其二次封装，把它封装成组件。