react-baidu-maps

Features

React components for Baidu Maps.
Custom config supported.

Installation

npm install react-baidu-maps --save

Usage

Getting Started

You need to obtain a Baidu Maps AK through Baidu LBS Platform.

Then import Baidu Maps script into your index.html.

<html>
  <head>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=input_your_key"></script> 
  </head>
  <body>
  </body>
</html>

Use Baidu Maps statically:

import { BaiduMap } from 'react-baidu-maps';
ReactDOM.render(
  <div style={{ background: '#444', height: '500px' }}>
    <BaiduMap mapContainer={<div style={{ height: '100%' }} />} />
  </div>, container);

Use Baidu Maps dynamically with asynchronous load:

import { asyncWrapper } from 'react-baidu-maps';
const AsyncMap = asyncWrapper(BaiduMap);
ReactDOM.render(
  <div style={{ background: '#444', height: '500px' }}>
    <AsyncMap
      mapUrl={`http://api.map.baidu.com/api?v=3.0&ak=${MAP_KEY}`}
      loadingElement={<div>Loading.....</div>}
      mapContainer={<div style={{ height: '100%' }} />} />
  </div>, container);

Handle Events

All events are mapped to React props with name like 'on + {event name}'(e.g. tilesloaded => onTilesloaded, resize => onResize)，the first letter of event name should be capitalized.

ReactDOM.render(
  <div style={{ background: '#444', height: '500px' }}>
    <BaiduMap
      mapContainer={<div style={{ height: '100%' }}
      onTilesloaded={...}
      onClick={...} />} />
  </div>, container);

Overlays

All Baidu Maps overlays are supported.

Marker

<BaiduMap
  mapUrl={`http://api.map.baidu.com/api?v=2.0&ak=${MAP_KEY}`}
  loadingElement={<div>Loading.....</div>}
  mapContainer={<div style={{ height: '100%' }} />} >
  <Marker position={{ lng: 116.404, lat: 39.915 }} />
</BaiduMap>

Circle

<Circle
  center={{ lng: 116.404, lat: 39.915 }}
  radius={500}
  strokeColor="red"
  strokeWeight={2} />

Curve

const polygon = [
  {
    lng: 116.387112,
    lat: 39.920977
  },
  {
    lng: 116.394226,
    lat: 39.917988
  },
  {
    lng: 116.401772,
    lat: 39.921364
  },
  {
    lng: 116.41248,
    lat: 39.927893
  }
];
<Curve path={polygon} strokeWeight={2} strokeColor="red" />

GroundOverlay

<Ground
  bounds={{ sw: { lng: 116.424319, lat: 39.907408 }, ne: { lng: 116.442285, lat: 39.914714 } }}
  imageUrl="http://lbsyun.baidu.com/jsdemo/img/si-huan.png" />

Label

<Label
  position={{ lng: 116.365139, lat: 39.916595 }}
  content="Label Demo"
  offset={{ width: 30, height: -30 }} />

Polygon

const polygon = [
  {
    lng: 116.387112,
    lat: 39.920977
  },
  {
    lng: 116.394226,
    lat: 39.917988
  },
  {
    lng: 116.401772,
    lat: 39.921364
  },
  {
    lng: 116.41248,
    lat: 39.927893
  }
];
<Polygon path={polygon} strokeWeight={2} />

Polyline

const polyline = [
  {
    lng: 116.399,
    lat: 39.910
  },
  {
    lng: 116.405,
    lat: 39.920
  },
  {
    lng: 116.425,
    lat: 39.900
  }
];
<Polyline path={polyline} strokeWeight={2} strokeColor="green" />

Custom Overlay

<Overlay
  constructorParams={...}
  customConstructor={...}
  initialize={...}
  draw={...} />

MarkerClusterer

const MAX = 30;
const markerClusterer = [];
for (let i = 0; i < MAX; i++) {
  markerClusterer.push({
    lng: (Math.random() * 40) + 85,
    lat: (Math.random() * 30) + 21
  });
}
    
<MarkerClusterer>
  {markerClusterer.map(position => <Marker position={position} />)}
</MarkerClusterer>

InfoWindow

<Marker position={{ lng: 116.404, lat: 39.915 }}>
  <InfoWindow content="marker infoWindow" offset={{ width: 0, height: -20 }} />
</Marker>

CanvasLayer

<CanvasLayer
  zIndex={10}
  update={(canvas) => {
    const ctx = canvas.getContext('2d');
    if (!ctx) {
      return;
    }
    ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
    ctx.fillStyle = 'rgba(50, 50, 255, 0.7)';
    ctx.beginPath();
    const data = [
      new BMap.Point(116.297047, 39.979542), // eslint-disable-line no-undef
      new BMap.Point(116.321768, 39.88748), // eslint-disable-line no-undef
      new BMap.Point(116.494243, 39.956539) // eslint-disable-line no-undef
    ];
    for (let i = 0, len = data.length; i < len; i++) {
      const pixel = this.map.getBMap().pointToPixel(data[i]);
      ctx.fillRect(pixel.x, pixel.y, 30, 30);
    }
  }}
/>

Controls

All Baidu Maps controls are supported.

NavigationControl

<BaiduMap
  mapUrl={`http://api.map.baidu.com/api?v=2.0&ak=${MAP_KEY}`}
  loadingElement={<div>Loading.....</div>}
  mapContainer={<div style={{ height: '100%' }} />} >
  <NavigationControl
    type="small"
    anchor="top_right"
    offset={{ width: 0, height: 30 }} />
</BaiduMap>

ScaleControl

<ScaleControl />

MapTypeControl

<MapTypeControl  />

OverviewMapControl

<OverviewMapControl  />

GeolocationControl

<GeolocationControl
  onLocationSuccess={(e) => {
    let address = '';
    address += e.addressComponent.province;
    address += e.addressComponent.city;
    address += e.addressComponent.district;
    address += e.addressComponent.street;
    address += e.addressComponent.streetNumber;
    console.warn(`Current Location: ${address}`);
  }} />

CopyrightControl

<CopyrightControl
  anchor="bottom_right"
  copyrights={[
    {
      id: 1,
      content: "<div href='#' style='font-size:20px;background:yellow'>我是自定义版权控件</div>",
      bounds: {
        sw: {
          lng: 116.055026,
          lat: 39.591042
        },
        ne: {
          lng: 116.752974,
          lat: 40.237421
        }
      }
    }]} />

Subway

<AsyncMap
  mapUrl={`http://api.map.baidu.com/api?type=subway&v=1.0&ak=${MAP_KEY}`}
  loadingElement={<div style={{textAlign: 'center', fontSize: 40}}>Loading.....</div>}
  id='asyncmap1'
  mapContainer={<div style={{height: '100%'}} />}
  city='289'
/>

Subway Maker

<SubwayMarker
  station='西直门'
  icon={{
    url: 'https://api.map.baidu.com/images/subway/start-bak.png',
    size: {
      width: 50,
      height: 80
    }
  }}
/>

Subway Zoom Control

<SubwayZoomControl
  anchor='top_right'
/>

react-baidu-maps

react-baidu-maps

Features

Installation

Usage

Getting Started

Handle Events

Overlays

Marker

Circle

Curve

GroundOverlay

Label

Polygon

Polyline

Custom Overlay

MarkerClusterer

InfoWindow

CanvasLayer

Controls

NavigationControl

ScaleControl

MapTypeControl

OverviewMapControl

GeolocationControl

CopyrightControl

Subway

Subway Maker

Subway Zoom Control

Readme

Keywords

Package Sidebar

Install

Repository

Homepage

DownloadsWeekly Downloads

Version

License

Unpacked Size

Total Files

Last publish

Collaborators

Weekly Downloads