vue中使用百度地图创建多点信息窗口

分享价值,创造快乐!
点一点,赞一赞,好习惯!O(∩_∩)O
项目下载地址:https://github.com/sy-zy/VueBMapInfoWindow

这是一个关于在Vue.js项目中使用百度地图创建多点信息窗口二次封装的组件。窗口内部的内容需自己编写样式。
该组件无需开发者编写百度地图代码,只需安装Vue Baidu Map然后import该组件再传入相应参数即可使用。

1、安装Vue Baidu Map
npm install vue-baidu-map --save

2、复制文件到自己的组件库

3、页面中使用组件

4、组件参数

map(Object)

地图容器对象

属性 类型 默认值 必填 说明
ak String true 您的百度地图流浪器端AK秘钥
center Object {lng: 116.402544,lat: 39.912057} false 地图中心坐标位置
zoom Number 12 false 缩放等级
width String 100% false 宽度
height String 100% false 高度

markers(Array)

地图标记点数组,数组里面是对象

属性 类型 默认值 必填 说明
lng Number/String true 您的百度地图流浪器端AK秘钥
lat Number/String true 地图中心坐标位置
markerIcon Object false 缩放等级
show Boolean false false 当前信息窗口是否显示,所有窗口只能显示一个

markerIcon(Object)

地图标记点图标对象

属性 类型 默认值 必填 说明
url String true 坐标点图标地址(不可使用本地路径)
size Object {width: 30, height: 40} true 坐标点宽度和高度

记得点个赞哦O(^_^)O