首先安装
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 组件
需要在地图上显示一个信息窗体的时候使用；在一个地图上最多只能同时显示一个信息窗体。
详细信息见[官网](https://elemefe.github.io/react-amap/articles/start)
网友评论