9 changed files with 337 additions and 59 deletions
-
13src/components/SelectGaodeLngLat/index.jsx
-
3src/components/SelectGaodeLngLat/index.scss
-
BINsrc/components/SelectGaodeLngLat2/blue-point.png
-
231src/components/SelectGaodeLngLat2/index.jsx
-
29src/components/SelectGaodeLngLat2/index.scss
-
2src/components/index.jsx
-
71src/pages/InRoadMgm/RecordInquiry/ParkRecordTotal/loadable.jsx
-
4src/pages/NewEnergy/ChargeStationMgm/index.scss
-
43src/pages/NewEnergy/ChargeStationMgm/loadable.jsx
|
After Width: 48 | Height: 54 | Size: 2.3 KiB |
@ -0,0 +1,231 @@ |
|||
import React, { useState, useEffect, useRef } from "react"; |
|||
import { Button, Input, Modal, message, AutoComplete } from "antd"; |
|||
import L from "leaflet"; |
|||
import "leaflet/dist/leaflet.css"; |
|||
import "leaflet.chinatmsproviders"; |
|||
import ajax from "@/services"; |
|||
import "./index.scss"; |
|||
import Rerm from "./blue-point.png"; |
|||
let timer = null; |
|||
function SelectGaodeLngLat(props) { |
|||
const { |
|||
getLntLat = () => { }, |
|||
onChange = () => { }, |
|||
_lngLat = [], // 数据回填 经纬度 |
|||
_address = "", // 数据回填 地址 |
|||
} = props; |
|||
const mapConfig = { |
|||
center: sysConfig.map.center, |
|||
zoom: sysConfig.map.zoom, |
|||
zooms: sysConfig.map.zooms, |
|||
maxZoom: sysConfig.map.zooms[1], |
|||
minZoom: sysConfig.map.zooms[0], |
|||
mapTileHost: sysConfig.map.mapTileHost, |
|||
zoomOffset: sysConfig.map.zoomOffset, |
|||
mapTileType: sysConfig.map.mapTileType, |
|||
}; |
|||
const [visible, setVisible] = useState(false); |
|||
const [lnglat, setLnglat] = useState([]); |
|||
const [address, setAddress] = useState(""); |
|||
const [searchLnglatValue, setSearchLnglatValue] = useState([]); |
|||
const [getLngLabel, setGetLngLabel] = useState([]) |
|||
const [map, setMap] = useState(null); |
|||
const [markers, setMarkers] = useState(null); |
|||
const mapRef = useRef(null); |
|||
|
|||
const searchLnglat = (values) => { |
|||
clearTimeout(timer); |
|||
timer = setTimeout(() => { |
|||
ajax.handleLng({ |
|||
keywords: values, |
|||
}).then( |
|||
(res) => { |
|||
if (parseInt(res?.status) === 20000) { |
|||
setGetLngLabel( |
|||
res?.data.map((ele) => { |
|||
return { |
|||
...ele, |
|||
label: ( |
|||
<div className="labds"> |
|||
<span>{ele.label}</span> |
|||
</div> |
|||
), |
|||
value: ele.label, |
|||
values: ele.value |
|||
}; |
|||
}) |
|||
); |
|||
} else { |
|||
message.error(res?.message); |
|||
} |
|||
}, |
|||
(err) => { |
|||
console.log(err); |
|||
} |
|||
); |
|||
}, 1000); |
|||
|
|||
}; |
|||
//选择 |
|||
const onSelect = (data) => { |
|||
let add = getLngLabel.filter((ele) => ele.value == data)[0] || []; |
|||
setLnglat([add.lng, add.lat]); |
|||
}; |
|||
function getLocationMessage(v) { |
|||
// const lat_lng = lnglat.reverse().join(","); |
|||
const lat_lng = v ? v.join(",") : lnglat.join(","); |
|||
ajax.getLocationNameByLngLat({ lat_lng }).then((res) => { |
|||
if (res.status === 20000) { |
|||
setAddress(res.data.address); |
|||
} else { |
|||
message.error(res.message); |
|||
} |
|||
}); |
|||
} |
|||
// 打开弹窗 |
|||
const open = () => { |
|||
setVisible(true) |
|||
} |
|||
// 保存 |
|||
const save = () => { |
|||
setVisible(false) |
|||
onChange(address); |
|||
getLntLat(lnglat); |
|||
getLocationMessage(); |
|||
} |
|||
// 地图 |
|||
const initMap = () => { |
|||
let _map = new AMap.Map("mapid", { |
|||
resizeEnable: true, |
|||
layers: [ |
|||
new AMap.TileLayer.Satellite(), |
|||
new AMap.TileLayer.RoadNet() |
|||
] |
|||
}); |
|||
_map.setCenter([mapConfig.center[1], mapConfig.center[0]], mapConfig.zoom); |
|||
setMap(_map) |
|||
if (_lngLat && _lngLat.length) { |
|||
let marker = new AMap.Marker({ |
|||
position: new AMap.LngLat(parseFloat(_lngLat[0]), parseFloat(_lngLat[1])), |
|||
content: markerContent, |
|||
offset: new AMap.Pixel(-24, -45), |
|||
}); |
|||
_map.add(marker); |
|||
setMarkers(marker); |
|||
setTimeout(() => { |
|||
_map.setCenter(new AMap.LngLat(parseFloat(_lngLat[0]), parseFloat(_lngLat[1]))); |
|||
}, 800); |
|||
} |
|||
_map.on('click', function (e) { |
|||
setLnglat([e.lnglat.lng.toFixed(4), e.lnglat.lat.toFixed(4)]); |
|||
}) |
|||
mapRef.current = map |
|||
}; |
|||
const markerContent = `<div class="custom-content-marker"> |
|||
<img src='${Rerm}' /> |
|||
</div>`; |
|||
// 添加标记 |
|||
const addMarker = (data) => { |
|||
// console.log('marker',data); |
|||
if (markers) { |
|||
map.remove(markers); |
|||
} |
|||
if (data.length == 0) return |
|||
let marker = new AMap.Marker({ |
|||
position: new AMap.LngLat(parseFloat(data[0]), parseFloat(data[1])), |
|||
content: markerContent, |
|||
offset: new AMap.Pixel(-24, -45), |
|||
}); |
|||
map.add(marker); |
|||
setMarkers(marker); |
|||
setTimeout(() => { |
|||
map.setCenter(new AMap.LngLat(parseFloat(data[0]), parseFloat(data[1]))); |
|||
}, 800); |
|||
}; |
|||
|
|||
useEffect(() => { |
|||
if (visible) { |
|||
setAddress(_address); |
|||
setLnglat(_lngLat); |
|||
setTimeout(() => { |
|||
initMap() |
|||
}, 500) |
|||
} |
|||
}, [visible]); |
|||
|
|||
useEffect(() => { |
|||
lnglat?.length > 0 && getLocationMessage(lnglat) |
|||
if (map) { |
|||
addMarker(lnglat); // 添加点位 |
|||
} |
|||
}, [lnglat]); |
|||
|
|||
useEffect(() => { |
|||
setTimeout(() => { |
|||
if (searchLnglatValue.length === 0) return; |
|||
mapRef.current.setView(searchLnglatValue, 13); |
|||
}, 800) |
|||
}, [searchLnglatValue]); |
|||
|
|||
return ( |
|||
<div className="SelectLnglat"> |
|||
<Button |
|||
onClick={open} |
|||
type="primary" |
|||
> |
|||
打开 |
|||
</Button> |
|||
<Modal |
|||
className="map-modal" |
|||
open={visible} |
|||
destroyOnClose |
|||
width={1000} |
|||
footer={false} |
|||
onCancel={() => { setVisible(false) }} |
|||
> |
|||
<div |
|||
style={{ |
|||
width: "100%", |
|||
height: "500px", |
|||
}} |
|||
> |
|||
<div |
|||
id="mapid" |
|||
className="map" |
|||
style={{ |
|||
height: "100%", |
|||
width: "100%", |
|||
}} |
|||
></div> |
|||
</div> |
|||
|
|||
<div className="bottom-input"> |
|||
<div className="input-search"> |
|||
<AutoComplete |
|||
options={getLngLabel} |
|||
placeholder={address ? address : "请选择地址"} |
|||
onSearch={searchLnglat} |
|||
onSelect={onSelect} |
|||
// enterButton={"搜索"} |
|||
style={{ width: 300 }} |
|||
></AutoComplete> |
|||
</div> |
|||
<div className="result-search"> |
|||
<label>已选择的经纬度:</label> |
|||
<Input value={lnglat} /> |
|||
</div> |
|||
<div style={{ marginLeft: "40px" }}> |
|||
<Button |
|||
type="primary" |
|||
onClick={save} |
|||
> |
|||
保存 |
|||
</Button> |
|||
</div> |
|||
</div> |
|||
</Modal> |
|||
</div> |
|||
); |
|||
} |
|||
|
|||
export default SelectGaodeLngLat; |
|||
@ -0,0 +1,29 @@ |
|||
.SelectLnglat { |
|||
|
|||
} |
|||
.map-modal { |
|||
.ant-modal-body { |
|||
border-radius: 4px; |
|||
} |
|||
.ant-modal-close-x { |
|||
width: 30px; |
|||
height: 30px; |
|||
line-height: 30px; |
|||
} |
|||
} |
|||
.bottom-input { |
|||
display: flex; |
|||
margin: 10px 0 0 0; |
|||
.input-search { |
|||
margin: 0 10px 0 0; |
|||
width: 300px; |
|||
} |
|||
.result-search{ |
|||
label{ |
|||
width: 160px; |
|||
line-height: 32px; |
|||
height:32px; |
|||
} |
|||
display: flex; |
|||
} |
|||
} |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue