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

首先安装

npm install --save react-amap

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

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

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

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

this.markerPosition = {longitude: 121, latitude: 36};

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),
  

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')}
    };
	

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')},
}
  

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')},
    }
	

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,
    };
	

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

详细信息见官网