Popup 信息框

Popup 是用于在地图上指定经纬度位置，展示自定义内容的气泡。

说明

Popup 的锚点位置是由经纬度来表达的，当地图缩放/平移时，Popup 会自动计算相对于当前地图的坐标并且自动位移。换句话说，如果开发者需要在地图的指定经纬度位置展示信息气泡，可以考虑使用 Popup 组件来实现对应效果。

开发者可以自定义 Popup 主体展示内容：

• 纯文本可以通过 text 配置或者 setText 方法控制 Popup 的展示文本。
• 自定义 DOM 可以通过 html 配置或者 setHTML 方法，支持传入 HTML 字符串或者 DOM 元素或数组的方式控制 Popup 的展示内容。

使用

示例

import { Scene, Popup } from '@antv/l7';

const scene = new Scene({
  id: 'map',
  map: new GaodeMapV2({
    // ...
  }),
});

scene.on('loaded', () => {
  const popup = new Popup({
    // 初始锚点经纬度
    lngLat: {
      lng: 120,
      lat: 30,
    },
    // Popup 标题
    title: 'Popup Title',
    // Popup 内容
    html: 'Popup Content',
  });
  scene.addPopup(popup);

  // 更新 Popup 锚点经纬度
  popup.setLngLat({
    lng: 130,
    lat: 40,
  });

  // 更新 Popup 内容
  popup.setHTML('New Popup Content');
});

配置

ElementType

type ElementType = HTMLElement | HTMLElement[] | DocumentFragment | Text | string;

AnchorType

type AnchorType =
  | 'center'
  | 'top'
  | 'top-left'
  | 'top-right'
  | 'bottom'
  | 'bottom-left'
  | 'bottom-right'
  | 'left'
  | 'right';

方法

事件