基于react-amap的 输入地址动态显示地理位置的需求的实现
地图组件效果图
- 表单中引入地图组件
<div style={{ width: '70%', height: 210, alignItems: 'center' }}>
<Map plugins={this.mapPlugins} center={position} zoom={12}>
<Marker position={position} />
</Map>
</div>
ps:经纬度需要初始化，否则组件会崩溃
2.填写地址后，触发定位
handleTextAreaChange = () => {
console.log(`${this.props.form.getFieldValue('address')}`);
var result = fetch(
'http://restapi.amap.com/v3/geocode/geo?key=' +
MAP_KEY +
'&address=' +
`${this.props.form.getFieldValue('address')}`,
{
method: 'GET'
}
);
result
.then(res => {
return res.json();
})
.then(json => {
console.log(json);
if (json.geocodes && json.geocodes.length > 0) {
let position = {
longitude: json.geocodes[0].location.split(',')[0],
latitude: json.geocodes[0].location.split(',')[1]
};
console.log('position', position);
this.props.form.setFieldsValue(position);//给表单赋值
}
});
};
ps:使用高德地图web服务的地址编码api,将地址转化为经纬度,可以方便的将经度,维度保存到数据库。
3.地图定位的回显
const longi = getFieldValue('longitude') || 116.397499;
const lati = getFieldValue('latitude') || 39.908722;
console.log('longi', longi);
console.log('lati', lati);
const position = {
longitude: longi,
latitude: lati
};
ps:上段代码用于地图组件的初始化和修改操作的回显。
基于echart的动态显示数据的环形图
- 首先简单回顾echart的相关api
-
如果需要在环形饼图中间添加数据，只需要在series的label中加入formatter即可。
例如
环形饼图
label: {
normal: {
position: 'center',
formatter: abnormalTotal + '辆',
textStyle: {
fontSize: '15',
color: 'red'
}
},
- 最后，动态添加数据，將数据当作property传入组件即可。
<div className={styles.pie}>
<Pie data={pieData} abnormalTotal={abnormalTotal} />
</div>
