气泡弹窗（MapPopup）

示例

示例源码

import React, { useEffect, useRef, useState } from 'react'
import ReactDOM from 'react-dom'
import { MbMap, MbMapPopup, MbTiandituLayer } from '@mapbox-react/core'

const App = () => {
  const [mapCenter] = useState([116.38745, 39.91266])
  const [zoom, setZoom] = useState(13)

  const [showCustomPopup, setShowCustomPopup] = useState(true)
  const [showDefaultPopup, setShowDefaultPopup] = useState(true)
  const [coordinates, setCoordinates] = useState([116.388, 39.91266])
  const [hideOnZoom, setHideOnZoom] = useState(false)
  const [hideOnMove, setHideOnMove] = useState(false)

  return (
    <div className="map-wrapper">
      <MbMap center={mapCenter} zoom={zoom} pitch={10}>
        <MbTiandituLayer types={['vec']} />
        <MbMapPopup
          show={showCustomPopup}
          coordinates={coordinates}
          anchor="bottom"
          showTip={false}
          hideOnZoom={hideOnZoom}
          hideOnMove={hideOnMove}
          onUpdateShow={setShowCustomPopup}
        >
          <div
            style={{ width: '100px', height: '100px', background: '#81adb0d9' }}
          >
            <p>自定义Popup</p>
          </div>
        </MbMapPopup>

        <MbMapPopup
          show={showDefaultPopup}
          coordinates={[116.4, 39.91266]}
          hideOnClick={false}
          content={<>默认Popup</>}
          onUpdateShow={setShowDefaultPopup}
        ></MbMapPopup>
      </MbMap>
    </div>
  )
}

ReactDOM.render(<App />, document.querySelector('#root'))

API

PROPS

名称	描述	类型	默认值
anchor	表示标记的哪个部位距离坐标点最近	string（'center', 'top', 'bottom', 'left', 'right', 'top-left', 'top-right', 'bottom-left', 'bottom-right'）	-
className	添加到popup dom元素上的Class	string	-
coordinates	marker的经纬度位置	number[]	-
hideOnClick	点击地图时是否自动关闭气泡弹窗	boolean	false
hideOnMove	鼠标在地图移动时是否自动关闭气泡弹窗	boolean	false
offset	popup偏移量 正向为右/下	number / number[]	[0,0]
show	是否显示	boolean	true
showTip	是否自动添加气泡指向三角形	boolean	true
tipColor	指向三角形颜色	string	#fff
content	自定义提示框内容	ReactNode	-
children	子节点	any	-

EVENTS

名称	描述	参数
onCreated	地图初始化完成事件	-
onUpdateShow	显示隐藏事件	show: boolean

METHODS

名称	描述	定义