Popup

Popup is a bubble used to specify the latitude and longitude location on the map and display customized content.

illustrate

The anchor point position of Popup is expressed by longitude and latitude. When the map is zoomed/panned, Popup will automatically calculate the coordinates relative to the current map and automatically shift. In other words, if a developer needs toSpecify latitude and longitude locationTo display information bubbles, you can consider using the Popup component to achieve the corresponding effect.

Developers can customize the main display content of Popup:

• Plain text can passtextconfigure orsetTextMethod controls the Popup’s display text.
• Custom DOM can be created viahtmlconfigure orsetHTMLMethod supports passing in HTML strings or DOM elements or arrays to control the display content of the Popup.

use

Example

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

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

scene.on('loaded', () => {
  const popup = new Popup({
    //Initial anchor point latitude and longitude
    lngLat: {
      lng: 120,
      lat: 30,
    },
    // Popup title
    title: 'Popup Title',
    // Popup content
    html: 'Popup Content',
  });
  scene.addPopup(popup);

  //Update Popup anchor point latitude and longitude
  popup.setLngLat({
    lng: 130,
    lat: 40,
  });

  //Update Popup content
  popup.setHTML('New Popup Content');
});

Configuration

ElementType

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

AnchorType

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

method

event