弹窗

API: Popup

弹窗（Popup）是一个可以在地图上显示内容的弹出窗口，通常用于查看要素的属性内容。

创建弹窗

const popup = new Popup()
// 监听弹窗打开事件
popup.on('open', () => {
  console.log('popup was opened')
})

设置弹窗内容

HTML

popup.setHTML('<h1>Hello World!</h1>').addTo(map)

Vue 3 组件

const popupNode = document.createElement('div')
// Popup 为 Vue3 组件
createApp(Popup).mount(popupNode)
popup.setDOMContent(popupNode).setLngLat([107.7, 29.9]).addTo(map)

React 组件

const popupNode = document.createElement('div')
// Popup 为 React 17 组件
ReactDOM.render(<Popup />, popupNode)
popup.setDOMContent(popupNode).setLngLat([107.7, 29.9]).addTo(map)

const popupNode = document.createElement('div')
// Popup 为 React 18 组件
createRoot(popupNode).render(<Popup />)
popup.setDOMContent(popupNode).setLngLat([107.7, 29.9]).addTo(map)