React-BMap 正在参加 2020 年度 OSC 中国开源项目评选,请投票支持!
React-BMap 在 2020 年度 OSC 中国开源项目评选 中已获得 {{ projectVoteCount }} 票,请投票支持!
投票让它出道
已投票
授权协议 MIT
操作系统 跨平台
软件类型 开源软件
开发厂商
地区 国产
提 交 者 Kai_Ni
适用人群 未知
收录时间 2017-07-04

软件简介

React-BMap 

基于百度地图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。

示例

可查看示例文件夹下的示例使用示例代码,示例效果可访问预览地址

安装使用

页面头部需加载百度地图JavaScript Api代码

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>

密钥可去百度地图开放平台官网申请

推荐使用npm方式安装使用,然后通过es6模块加载

npm install react-bmap

支持UMD规范的打包库

<script src="http://huiyan-fe.github.io/react-bmap/dist/react-bmap.min.js"></script>

入口命名空间window.ReactBMap 示例预览 示例源码

Hello World

import {Map, Marker, NavigationControl, InfoWindow} from 'react-bmap'

<Map center={{lng: 116.402544, lat: 39.928216}}>
    <Marker position={{lng: 116.402544, lat: 39.928216}} />
    <NavigationControl /> 
    <InfoWindow position={{lng: 116.402544, lat: 39.928216}} text="内容" title="标题"/>
</Map>

基础地图组件文档

Map

<Map center={{lng: 116.402544, lat: 39.928216}} zoom="12" />

Marker

<Marker position={{lng: 116.402544, lat: 39.928216}}/>

Control

<NavigationControl />
<MapTypeControl />
<ScaleControl />
<OverviewMapControl />

InfoWindow

<InfoWindow position={{lng: 116.402544, lat: 39.928216}} text="信息窗口内容" title="信息窗口标题"/>

图形组件,圆形、折线、多边形组件

Circle

<Circle 
    center={{lng: 116.403119, lat: 39.929543}} 
    fillColor='blue' 
    strokeColor='white' 
    radius="3000"
/>

Polyline

<Polyline 
    strokeColor='green' 
    path={[
        {lng: 116.403119, lat: 39.929543},
        {lng: 116.265139, lat: 39.978658},
        {lng: 116.217996, lat: 39.904309}
    ]}
/>

Polygon

<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

<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

<MapvLayer data={[]} options={{}} />

Road

<Road roadPath={['116.330484,40.031406,116.33124,40.029496,116.33124,40.029496']}/>

Boundary

<Boundary data={[
    {
        name: '海淀区',
        count: 20
    },
    {
        name: '朝阳区',
        count: 10
    }
]}/>

TrafficLayer 交通路况图层 示例代码

<TrafficLayer /
展开阅读全文

代码

的 Gitee 指数为
超过 的项目

评论 (0)

加载中
更多评论
暂无内容
发表了博客
2018/07/12 19:05

react 自定义 百度地图(BMap)组件

1.html 页面引入 相关js public/index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"> <link rel="manifest" href="%PUBLIC_URL%/manifest.json...

0
0
发表了博客
2018/11/20 11:08

插件使用 之 Bmap

Bmap 百度地图 引入 <script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=y4PT8G6QkwtkVU7p5P26O8azvuRXg9Lz"></script> <script type="text/javascript" src="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.js"></script> <link rel="stylesheet" href="http:/...

0
0
发表了博客
2019/03/12 15:29

百度地图中找不到BMap的解决

一般情况下是引用的问题,产生的原因大概有两种 1.不同架构的引用方式不同,引用js的方式不同导致 2.自身调用顺序有误 官方的引用方式是使用标签引入,示例 <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script> 还有官方提供的https的引用方式,示例 <script type="text/jav...

0
0
发表了博客
2018/06/28 10:38

Echarts 如何使用 bmap 的 API

使用 Echarts 在绘制 Binning on map 的图形时(其实也就是 在地图上绘制热力色块图) 解决因为数据量过大,希望在拖拽加载或者缩放加载的时候,根据可视区域的经纬度范围,来请求相应的数据,这时候就要用到百度地图 Bmap 的拖拽和缩放的 API 而且要获取的 Bmap 一定是引入到该图中的 map 搜了好久才找到以下方法: va...

0
0
发表了博客
2019/10/15 12:07

解决vue中BMap未定义问题

原文链接: 点我 最近在项目中使用了百度地图来显示物流信息,实现方式有两种: 引用Vue Baidu Map 引用BMap 存在的问题:\color{red}{存在的问题:}存在的问题:; 使用BMap可以修改起始点和终点的图标,但是地图需要刷新页面才会显示。 针对以上问题,问题的实现如下所示: Vue文件中的代码 <template>   <div id="my...

0
0
发表了博客
2019/03/13 16:28

vue + BMap实现常用地图

实现功能: 缩放 自定义icon maker 多个覆盖点的点击事件 获取两点的距离 信息窗口的点击事件 <template> <div id="allmap" ref="mymap"></div> </template> <style scoped> #allmap { width: 100%; height: calc(100vh - 50vw); margin-bottom: 9.3333vw; } .map-wrap /deep/ .anchorB...

0
0
发表了博客
2018/05/29 18:44

vue项目 调用百度地图 BMap is not defined

这次老板新接了一个四点半官网页面,使用vue来写。emm……我感觉整个人都不好了,两天半解决了20个静态页面。还好vue写页面简直飞快,遇到一个vue的新坑,使用百度地图。 研究了好一会,总是报错BMap is not defined 我只有一个页面需要用到地图,所以我是使用cdn引入的方式来写的,并没有像网上一些教程一样使用npm引入...

0
0
发表了博客
2018/02/06 12:54

BMap添加海量点数据,BMap.Point携带数据

在开发web项目的过程中使用到了百度地图,由于要在地图中画出很多点比较影响加载速度,查看官方文档,发现有提供加载海量点的功能BMap.PointCollection,用这个加快速度,但是官方文档中提供的demo中仅能获取到点击坐标的经度、纬度。无法再获取到其他信息,用户自定义的数据也不行。要想在点的点击事件中获取到其他inf...

0
0
发表了博客
06/25 20:51

前端笔记-echarts加载bmap地图

程序运行截图如下: 这里首先要申请个百度地图密钥 使用下面的方式输入密钥,这里使用jsonp的方式 源码如下: <html> <head> <title></title> <script src="echarts.js"></script> <script src="bmap.js"></script>   <script src="http://api.map.baidu.com/api?v=2.0&ak=xxxx"></script> </head> <body> <div ...

0
0
发表了博客
2019/12/05 11:38

React: React脚手架

一、简言 React开发目前已经非常流行,对于如何实现对React项目的管理和维护,React生态圈出现了大量可用的开发工具,例如Browserify、Gulp、Grunt、webpack等。其中,webpack称为CommonJS模块的主流工具之一,它是一个模块绑定器,拥有模块化和网络性能的两大优点,可以将不同类型的文件转换为单个文件,也可以将所有的...

0
0
没有更多内容
加载失败,请刷新页面
点击加载更多
加载中
下一页
发表于大前端专区
2019/11/11 11:20

关于后台调用百度地图APIweb服务开发中正逆地理编码接口问题,公司服务器内网无法开放域名,只能通过IP调用

基于公司框架,在后端java中通过url HttpConnection调用百度地图API web服务中的 正逆地理编码功能,因为应用服务器上无法连接外网,而又不支持开放域名访问,只能通过IP,现在调用就是将url里的域名换成ip, ip是通过本地服务器ping api.map.baidu.com获得的,环境上已经开通了对应ip 和 端口,但是无论是在本地上测试还...

1
0
没有更多内容
加载失败,请刷新页面
点击加载更多
加载中
下一页
0 评论
22 收藏
分享
返回顶部
顶部