指南针控件(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 | 是否显示指南针 | boolean | true |
showZoom | 是否显示放大缩小按钮 | boolean | true |
EVENTS
名称 | 描述 | 参数 |
---|---|---|
onCreated | 地图初始化完成事件 | - |
METHODS
名称 | 描述 | 定义 |
---|