MapPopup

Example

Example Source Code

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

Name	Description	Type	Default
anchor	Specifies which part of the marker is closest to the coordinate point	string（'center', 'top', 'bottom', 'left', 'right', 'top-left', 'top-right', 'bottom-left', 'bottom-right'）	-
className	Class added to the popup DOM element	string	-
coordinates	The longitude and latitude position of the marker	number[]	-
hideOnClick	Whether the popup automatically closes when the map is clicked	boolean	false
hideOnMove	Whether the popup automatically closes when the mouse moves on the map	boolean	false
offset	The popup offset. Positive values for right/down	number / number[]	[0,0]
show	v-model Whether the popup is visible	boolean	true
showTip	Whether to automatically add a triangular tip to the popup	boolean	true
tipColor	The color of the triangular tip	string	#fff
content	Custom popup content node	ReactNode	-
children	Children nodes	any	-

EVENTS

Name	Description	Parameters
onCreated	Map initialization completed event	-
onUpdateShow	Show/Hide event	show: boolean

METHODS

Name	Description	Definition