基于百度地图 api 封装的 React 组件库 React-BMap

MIT
JavaScript 查看源码»
跨平台
2017-07-04
Kai_Ni

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 /
加载中

评论(0)

暂无评论

暂无资讯

暂无问答

调用手机GPS实现当前位置定位并展现百度地图上

<style type="text/css"> * { height: 100%; // 设置高度,不然会显示不出来 } </style> <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> <script type="text/javasc...

2016/12/28 09:35
34
0
数据展示 带点击弹框小实例

map.clearOverlays(); var pts = []; for (var i = 0; i < data.length; i++) { var pt = new BMap.Point(data[i].lng,data[i].lat); var myIcon = null; if (data[i].dataType == "JCD" || ...

2016/06/30 11:25
64
0
根据地址查询百度坐标

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>根据地址查询经纬度</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <script type="text/javas...

2016/06/30 17:19
4
0
百度逆地理解析

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf8" /> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <title>...

2016/12/28 11:34
31
0
利用WeX5集成百度地图

最近做一个地图类的app 经过几天的摸索,终于完成百度地图集成的界面 先看效果: 1、加载完成之后,页面加载制定位置的地图 2、顶部能够输入地图的关键字,地图显示符合条件的下拉列表 3、用...

2016/05/27 10:21
55
0
百度离线API获取坐标和添加标注

前言:对百度地图的使用已经成为了我们生活中的一部分,对于习惯使用百度地图的朋友来说更是不可或缺。但是如果没有网络的话就不能正常使用百度地图的服务,制作一款离线地图在这个时候就显得...

2016/01/27 10:22
71
1
百度地图显示标记

百度地图

2016/07/15 10:31
2
0
百度地图API

<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>定点宾馆</title> <link rel="stylesheet" href=...

2014/07/15 10:07
46
0

没有更多内容

加载失败,请刷新页面

返回顶部
顶部