react+react-amap使用高德地图组件

首先安装

npm install --save react-amap

react-amap包含地图，覆盖物，信息窗体3类组件
地图组件
Map组件，Map 的父组件必须具有宽度和高度；

<Map amapkey={'788e08def03f95c670944fe2c78fa76f'}/>

MouseTool 组件,需要在地图上启用鼠标工具插件时使用；启用该插件可以进行鼠标画标记点、线、多边形、矩形、圆、距离量测、面积量测、拉框放大、拉框缩小等功能。

 constructor(){
 	this.mapPlugins = ['ToolBar'];
	this.mapCenter = {longitude: 120, latitude: 35};
}
<Map 
      plugins={this.mapPlugins}
      center={this.mapCenter}
    >

覆盖物组件
Marker组件：在地图上创建一个图标，组件要放在地图组件Map里面，position表示坐标， Marker 的外观可以通过设置style自定义，还可以通过events绑定事件

this.markerPosition = {longitude: 121, latitude: 36};
<Marker position={this.markerPosition}  events={this.markerEvents}/>

Markers 组件：在地图上创建大量图标；

	const randomPosition = () => ({
	  longitude: 100 + Math.random() * 20,
	  latitude: 30 + Math.random() * 20
	})
	const randomMarker = (len) => (
	  Array(len).fill(true).map((e, idx) => ({
	    position: randomPosition()
	  }))
	);
	markers: randomMarker(100),
  <Markers 
            markers={this.state.markers}
          />

Polygon 组件：在地图上一个多边形或者环状多边形时使用；

const randomPath = () => ({
   longitude: 100 + Math.random() * 50,
   latitude: 10 + Math.random() * 40,
 })
   this.state = {
      visible: true,
      draggable: true,
      path: Array(4).fill(true).map(randomPath),
    }
     this.events = {
      click: () => {console.log('clicked')},
      created: (ins) => {console.log(ins)},
      mouseover: () => {console.log('mouseover')},
      dblclick: () => {console.log('dbl clicked')}
    };
	<Polygon
        events={this.events}
        path={this.state.path}
        draggable={this.state.draggable}
        visible={this.state.visible}
      />

Polyline 组件：在地图上一个折线段的时候；

const randomPath = () => ({
 longitude: 60 + Math.random() * 50,
 latitude: 10 + Math.random() * 40,
})
this.state = {
  visible: true,
  draggable: true,
  path: Array(5).fill(true).map(randomPath),
};
this.lineEvents = {
  created: (ins) => {console.log(ins)},
  show: () => {console.log('line show')},
  hide: () => {console.log('line hide')},
  click: () => {console.log('line clicked')},
}
<Polyline 
        path={ this.state.path }
        events={ this.lineEvents }
        visible={ this.state.visible }
        draggable={ this.state.draggable }
      />  

Circle 组件：需要在地图上显示一个圆形时；

	const randomIndex = (len) => (Math.floor(Math.random() * len));
	const randomColor = () => {
	  const chars = '0123456789abcdef'.split('');
	  const len = chars.length;
	  return `#${chars[randomIndex(len)]}${chars[randomIndex(len)]}` 
	  + `${chars[randomIndex(len)]}${chars[randomIndex(len)]}` 
	  + `${chars[randomIndex(len)]}${chars[randomIndex(len)]}`;
	};
	this.state = {
      center: {longitude: 120, latitude: 20},
      radius: 15000,
      visible: true,
      style: {strokeColor: '#f00'},
      draggable: true,
    };
    this.circleEvents = {
      created: (ins) => {console.log(window.circle = ins)},
      click: () => {console.log('clicked')},
      mouseover: () => {console.log('mouseover')},
    }
	<Circle 
            center={ this.state.center } 
            radius={ this.state.radius }
            events={ this.circleEvents }
            visible={ this.state.visible }
            style={ this.state.style }
            draggable={ this.state.draggable }
          />

GroundImage 组件：需要在地图上特定边界区域内显示一张图片时使用；

  this.events = {
      created: (i) => {console.log(i)},
      click: () => {console.log('img click')},
      dblclick: () => {console.log('img dblclick')},
    };
    this.state = {
      src: this.pics[0],
      visible: true,
      opacity: 1,
      bounds: bc.bounds,
      mapCenter: bc.center,
    };
	<GroundImage
            visible={this.state.visible}
            events={this.events}
            bounds={this.state.bounds}
            src={this.state.src}
            opacity={this.state.opacity}
            clickable
          />

所有的覆盖物组件喝信息窗体组件都要放到地图Map组件中使用
信息窗体
InfoWindow 组件：需要在地图上显示一个信息窗体的时候使用；在一个地图上最多只能同时显示一个信息窗体。

详细信息见官网