欢迎您访问 最编程 本站为您分享编程语言代码,编程技术文章!
您现在的位置是: 首页

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

最编程 2024-07-05 12:02:13
...

在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

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