在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

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

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容