Skip to content
ON THIS PAGE

InfoWindow 信息窗口

使用 slot 模式渲染子节点向地图添加信息窗口,以及与地图相关的一些交互。

ts
import { InfoWindow } from 'vue3-baidu-map-gl'

提示

地图上只能同时显示一个infoWindow,所以当地图上有多个infoWindow组件同时绑定v-model="true",只有最后一个 infoWindow组件会在地图上显示。

组件示例

动态组件 Props

属性说明类型可选值默认值
modelValue / v-model是否开启信息窗体boolean -false
position信息窗体所在坐标{ lng: number, lat: number}[]-required
title信息窗标题文字string--
width信息窗宽度,单位像素。取值范围:0, 220 - 730。如果您指定宽度为 0,则信息窗口的宽度将按照其内容自动调整number220-7300
height信息窗高度,单位像素。取值范围:0, 60 - 650。如果您指定高度为 0,则信息窗口的高度将按照其内容自动调整number60-6500
offset信息窗位置偏移值。默认情况下在地图上打开的信息窗底端的尖角将指向其地理坐标,在标注上打开的信息窗底端尖角的位置取决于标注所用图标的 infoWindowOffset 属性值,您可以为信息窗添加偏移量来改变默认位置{x: number, y: number }-{x: 0, y: 0 }
enableAutoPan是否开启信息窗口打开时地图自动移动boolean- true
enableCloseOnClick是否开启点击地图关闭信息窗口boolean- true

组件事件

事件名说明属性
initd组件初始化后,调用的方法,返回一个地图实例{ map, BmapGL, instance }
unload组件卸载时会调用此方法-
close信息窗口被关闭时触发此事件event{type, target, point}
open信息窗口被打开时触发此事件event{type, target, point}
clickclose点击信息窗口的关闭按钮时触发此事件event{type, target}

Released under the MIT License.