|
|
@ -1,11 +1,13 @@ |
|
|
|
import React, { useState, useEffect, useRef, useLayoutEffect } from "react"; |
|
|
|
import { Button, Input, Modal, message } from "antd"; |
|
|
|
import { Button, Input, Modal, message, AutoComplete } from "antd"; |
|
|
|
import { BaseMap } from "../MapComponets"; |
|
|
|
import L from "leaflet"; |
|
|
|
import "leaflet/dist/leaflet.css"; |
|
|
|
import "leaflet.chinatmsproviders"; |
|
|
|
import ajax from "@/services"; |
|
|
|
import "./index.scss"; |
|
|
|
|
|
|
|
let timer = null; |
|
|
|
function SelectGaodeLngLat(props) { |
|
|
|
const { |
|
|
|
getLntLat = () => { }, |
|
|
@ -17,13 +19,48 @@ function SelectGaodeLngLat(props) { |
|
|
|
const [lnglat, setLnglat] = useState([]); |
|
|
|
const [address, setAddress] = useState(""); |
|
|
|
const [searchLnglatValue, setSearchLnglatValue] = useState([]); |
|
|
|
const [getLngLabel, setGetLngLabel] = useState([]) |
|
|
|
const searchLnglat = (values) => { |
|
|
|
if (values.split(",").length < 2) { |
|
|
|
return; |
|
|
|
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); |
|
|
|
} |
|
|
|
let lat = values.split(",")[0]; |
|
|
|
let lng = values.split(",")[1]; |
|
|
|
setSearchLnglatValue([lng, lat]); |
|
|
|
); |
|
|
|
}, 1000); |
|
|
|
|
|
|
|
}; |
|
|
|
//选择 |
|
|
|
const onSelect = (data) => { |
|
|
|
console.log(getLngLabel); |
|
|
|
let add = getLngLabel.filter((ele) => ele.value == data)[0] || []; |
|
|
|
console.log(add); |
|
|
|
// setSearchLnglatValue([ add.lng,add.lat]) |
|
|
|
setLnglat([add.lng, add.lat]); |
|
|
|
getLntLat([add.lng, add.lat]); |
|
|
|
}; |
|
|
|
function getLocationMessage() { |
|
|
|
// const lat_lng = lnglat.reverse().join(","); |
|
|
@ -71,10 +108,14 @@ function SelectGaodeLngLat(props) { |
|
|
|
|
|
|
|
<div className="bottom-input"> |
|
|
|
<div className="input-search"> |
|
|
|
<Input.Search |
|
|
|
<AutoComplete |
|
|
|
options={getLngLabel} |
|
|
|
placeholder="请选择地址" |
|
|
|
onSearch={searchLnglat} |
|
|
|
enterButton={"搜索"} |
|
|
|
></Input.Search> |
|
|
|
onSelect={onSelect} |
|
|
|
// enterButton={"搜索"} |
|
|
|
style={{ width: 300 }} |
|
|
|
></AutoComplete> |
|
|
|
</div> |
|
|
|
<div className="result-search"> |
|
|
|
<label>已选择的经纬度:</label> |
|
|
@ -170,8 +211,10 @@ function ModalMap(props) { |
|
|
|
}; |
|
|
|
}, []); |
|
|
|
useEffect(() => { |
|
|
|
setTimeout(()=>{ |
|
|
|
if (searchLnglatValue.length === 0) return; |
|
|
|
mapRef.current.setView(searchLnglatValue, 13); |
|
|
|
},800) |
|
|
|
}, [searchLnglatValue]); |
|
|
|
|
|
|
|
return ( |
|
|
|