Mapbox GL JS CookbookMapbox GL JS Cookbook
快速开始
样式规范
空间数据
插件
进阶
DECK.GL
  • 文档
  • 术语
  • 示例
GitHub
快速开始
样式规范
空间数据
插件
进阶
DECK.GL
  • 文档
  • 术语
  • 示例
GitHub
  • 快速开始
  • 标准样式
  • 交互处理

    • 弹窗
    • 控件
    • 标记
  • 教程

    • 高亮
  • 地理与几何
  • 地图服务

    • 地图服务
    • GeoServer
    • OGC API

弹窗

HTML

const popup = new mapboxgl.Popup({ closeOnClick: false })
  .setLngLat([-96, 37.8])
  .setHTML('<h1>Hello World!</h1>')
  .addTo(map)

参考:Display a popup

Vue 3

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

React 17

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

React 18

const popupNode = document.createElement('div')
// Popup 为 React 组件
createRoot(popupNode).render(<Popup />)
popup.setDOMContent(popupNode).setLngLat([107.7, 29.9]).addTo(map)
在 GitHub 上编辑此页!
上次更新:
贡献者: huanglii, huangli
Next
控件