
Security News
Deno 2.2 Improves Dependency Management and Expands Node.js Compatibility
Deno 2.2 enhances Node.js compatibility, improves dependency management, adds OpenTelemetry support, and expands linting and task automation for developers.
react-bmap
Advanced tools
基于百度地图JavaScript Api封装的React组件库,使用这个库最好需要先了解React和百度地图JavaScript Api。
React-BMap只是利用了React组件的生命周期,来调用对应的百度地图JavaScript Api的方法,比如在componentDidMount和componentDidUpdate的时候在地图上添加覆盖物,componentWillUnmount的时候移除覆盖物,React对应的render渲染函数模块返回的是null。所以这里面地图相关的dom并不是react渲染的,真正创建地图之类的还是使用百度地图JavaScript Api,React-BMap只是利用了React组件的写法来封装百度地图JavaScript Api,使我们在使用React的时候能更方便的使用百度地图JavaScript Api。
该组件库是针对2D版本地图的React组件库,如果想使用新版本的3D地图,请使用React-BMapGL。新的GL版地图支持无级缩放、地图倾斜、旋转等强大的功能,并且能更好的发挥MapVGL炫酷的可视化效果。
PS:由于3D地图基于WebGL开发,部分功能与2D版体验可能有差别,如果您的设备不支持WebGL,或者更追求稳定性,依然可以选择本组件库。
可查看示例文件夹下的示例使用示例代码,示例效果可访问预览地址
<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=您的密钥"></script>
密钥可去百度地图开放平台官网申请
npm install react-bmap
<script src="http://huiyan-fe.github.io/react-bmap/dist/react-bmap.min.js"></script>
入口命名空间window.ReactBMap 示例预览 示例源码
import {Map, Marker, NavigationControl, InfoWindow} from 'react-bmap'
<Map center={{lng: 116.402544, lat: 39.928216}} zoom="11">
<Marker position={{lng: 116.402544, lat: 39.928216}} />
<NavigationControl />
<InfoWindow position={{lng: 116.402544, lat: 39.928216}} text="内容" title="标题"/>
</Map>
<Map center={{lng: 116.402544, lat: 39.928216}} zoom="12" />
<Marker position={{lng: 116.402544, lat: 39.928216}}/>
<NavigationControl />
<MapTypeControl />
<ScaleControl />
<OverviewMapControl />
<InfoWindow position={{lng: 116.402544, lat: 39.928216}} text="信息窗口内容" title="信息窗口标题"/>
<Circle
center={{lng: 116.403119, lat: 39.929543}}
fillColor='blue'
strokeColor='white'
radius="3000"
/>
<Polyline
strokeColor='green'
path={[
{lng: 116.403119, lat: 39.929543},
{lng: 116.265139, lat: 39.978658},
{lng: 116.217996, lat: 39.904309}
]}
/>
<Polygon
fillColor='red'
strokeColor='yellow'
path={[
{lng: 116.442519, lat: 39.945597},
{lng: 116.484488, lat: 39.905315},
{lng: 116.443094, lat: 39.886494},
{lng: 116.426709, lat: 39.900001}
]}
/>
<MarkerList
data={[
{
text: "长沙大道",
location: "113.22183,28.191712"
},
{
text: "机场高速",
location: "113.057565,28.175208"
}
]}
fillStyle="#ff3333"
animation={true}
isShowShadow={false}
multiple={true}
autoViewport={true}
/>
<MapvLayer data={[]} options={{}} />
<MapvglView effects={['bloom']}>
<MapvglLayer
type="LineLayer"
data={data}
options={{
blend: 'lighter',
width: 10,
color: 'rgb(255, 153, 0, 0.6)'
}}
/>
</MapvglView>
<Road roadPath={['116.330484,40.031406,116.33124,40.029496,116.33124,40.029496']}/>
<Boundary data={[
{
name: '海淀区',
count: 20
},
{
name: '朝阳区',
count: 10
}
]}/>
<TrafficLayer />
BMap.Map
实例如果你使用 BMapLib
,需要 BMap.Map
实例的话,可以通过 <Map>
组件实例的 map
属性访问到它。
<Map ref={ref => {this.map = ref.map}} />
FAQs
react-bmap
The npm package react-bmap receives a total of 30 weekly downloads. As such, react-bmap popularity was classified as not popular.
We found that react-bmap demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 7 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Deno 2.2 enhances Node.js compatibility, improves dependency management, adds OpenTelemetry support, and expands linting and task automation for developers.
Security News
React's CRA deprecation announcement sparked community criticism over framework recommendations, leading to quick updates acknowledging build tools like Vite as valid alternatives.
Security News
Ransomware payment rates hit an all-time low in 2024 as law enforcement crackdowns, stronger defenses, and shifting policies make attacks riskier and less profitable.