/*
|
* @Author: dminyi 1301963064@qq.com
|
* @Date: 2024-08-17 14:41:57
|
* @LastEditors: dminyi 1301963064@qq.com
|
* @LastEditTime: 2024-08-19 15:06:35
|
* @FilePath: \gzDyh\gz-customerSystem\src\views\register\visit\component\map.jsx
|
* @Description: 地图
|
*/
|
import React, { useRef } from 'react';
|
import { Map, Marker, NavigationControl, InfoWindow } from 'react-bmapgl';
|
import { Form, Input, Button, Message } from '@arco-design/web-react';
|
import { Row, Col } from 'antd';
|
const FormItem = Form.Item;
|
|
const formItemLayout = {
|
labelCol: {
|
span: 4,
|
},
|
wrapperCol: {
|
span: 17,
|
},
|
};
|
|
export default function MapView(props) {
|
const mapRef = useRef()
|
const formRef = useRef()
|
|
const handleSubmit = () => {
|
if (formRef.current) {
|
formRef.current.validate(undefined, (errors, values) => {
|
if (!errors) {
|
var myGeo = new window.BMapGL.Geocoder();
|
// 将地址解析结果显示在地图上，并调整地图视野
|
myGeo.getPoint(values.name, function (point) {
|
if (point) {
|
mapRef.current.map.centerAndZoom(point, 16);
|
mapRef.current.map.addOverlay(new window.BMapGL.Marker(point, { title: values.name }))
|
} else {
|
Message.warning('您输入的地址没有解析到结果！');
|
}
|
}, '广州市')
|
}
|
})
|
}
|
}
|
|
return (
|
<div>
|
<Row gutter={[16, 0]}>
|
<Col span={16}>
|
<Form
|
ref={formRef}
|
layout='inline'
|
{...formItemLayout}
|
style={{ marginBottom: '8px' }}
|
>
|
<FormItem
|
label='查询位置：'
|
field='name'
|
>
|
<Input placeholder='请输入' style={{ width: '515px' }} />
|
</FormItem>
|
<Button style={{ marginRight: '20px' }}>
|
重置
|
</Button>
|
<Button
|
type="primary"
|
onClick={handleSubmit}
|
>
|
查询
|
</Button>
|
</Form>
|
<Map
|
ref={mapRef}
|
center={{ lng: 116.402544, lat: 39.928216 }}
|
zoom="11"
|
enableScrollWheelZoom
|
onClick={(e) => {
|
let pt = e.latlng;
|
let geoc = new window.BMapGL.Geocoder();
|
geoc.getLocation(pt, function (rs) {
|
let addComp = rs.addressComponents;
|
console.log(addComp);
|
// console.log(addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber);
|
})
|
}}
|
>
|
<Marker position={{ lng: 113.27, lat: 23.12 }} />
|
<InfoWindow position={{ lng: 113.27, lat: 23.12 }} text="广州市" />
|
</Map>
|
</Col>
|
<Col span={8}>
|
<div style={{ color: '#86909C', marginTop: '43px' }}>附近地址</div>
|
</Col>
|
</Row>
|
</div>
|
)
|
}
|
