Skip to content

指南针控件(NavigationControl)

导航控件组件,包括缩放按钮和一个指南针.

示例

示例源码
tsx
import React, { useState } from 'react'
import ReactDOM from 'react-dom'
import { MbMap, MbNavigationControl, MbTiandituLayer } from '@mapbox-react/core'

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

  return (
    <div className="map-wrapper">
      <MbMap center={mapCenter} zoom={zoom}>
        <MbTiandituLayer types={['vec']} />
        <MbNavigationControl position="top-right" />
      </MbMap>
    </div>
  )
}

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

API

PROPS

名称描述类型默认值
position控件所处位置string('top-left' , 'top-right' , 'bottom-left' ,'bottom-right')top-right
showCompass是否显示指南针booleantrue
showZoom是否显示放大缩小按钮booleantrue

EVENTS

名称描述参数
onCreated地图初始化完成事件-

METHODS

名称描述定义