|
|
|
@ -6,7 +6,8 @@ import "leaflet/dist/leaflet.css"; |
|
|
|
import "leaflet.chinatmsproviders"; |
|
|
|
import ajax from "@/services"; |
|
|
|
import "./index.scss"; |
|
|
|
|
|
|
|
import { compileString } from "sass"; |
|
|
|
import Rerm from "./blue-point.png"; |
|
|
|
let timer = null; |
|
|
|
function SelectGaodeLngLat(props) { |
|
|
|
const { |
|
|
|
@ -17,6 +18,7 @@ function SelectGaodeLngLat(props) { |
|
|
|
onChange = () => { }, |
|
|
|
} = props; |
|
|
|
const [lnglat, setLnglat] = useState([]); |
|
|
|
const [marker, setMarker] = useState([]); |
|
|
|
const [address, setAddress] = useState(""); |
|
|
|
const [searchLnglatValue, setSearchLnglatValue] = useState([]); |
|
|
|
const [getLngLabel, setGetLngLabel] = useState([]) |
|
|
|
@ -59,6 +61,7 @@ function SelectGaodeLngLat(props) { |
|
|
|
let add = getLngLabel.filter((ele) => ele.value == data)[0] || []; |
|
|
|
console.log(add); |
|
|
|
// setSearchLnglatValue([ add.lng,add.lat]) |
|
|
|
setMarker([add.lng, add.lat]) |
|
|
|
setLnglat([add.lng, add.lat]); |
|
|
|
getLntLat([add.lng, add.lat]); |
|
|
|
}; |
|
|
|
@ -103,7 +106,9 @@ function SelectGaodeLngLat(props) { |
|
|
|
setLnglat={setLnglat} |
|
|
|
getLntLat={getLntLat} |
|
|
|
searchLnglatValue={searchLnglatValue} |
|
|
|
/> |
|
|
|
markerPoint={marker} |
|
|
|
> |
|
|
|
</ModalMap> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div className="bottom-input"> |
|
|
|
@ -142,6 +147,7 @@ function ModalMap(props) { |
|
|
|
setLnglat = () => { }, |
|
|
|
getLntLat = () => { }, |
|
|
|
searchLnglatValue = [], |
|
|
|
markerPoint = [] |
|
|
|
} = props; |
|
|
|
const mapConfig = { |
|
|
|
center: sysConfig.map.center, |
|
|
|
@ -154,6 +160,7 @@ function ModalMap(props) { |
|
|
|
mapTileType: sysConfig.map.mapTileType, |
|
|
|
}; |
|
|
|
const [map, setMap] = useState(null); |
|
|
|
const [Marker, setMarker] = useState(null); |
|
|
|
const mapRef = useRef(null); |
|
|
|
const initMap = () => { |
|
|
|
// console.log(mapConfig); |
|
|
|
@ -195,6 +202,30 @@ function ModalMap(props) { |
|
|
|
}) |
|
|
|
mapRef.current = map |
|
|
|
}; |
|
|
|
useEffect(() => { |
|
|
|
if (map) { |
|
|
|
addMarker(markerPoint); // 添加点位 |
|
|
|
} |
|
|
|
}, [markerPoint]); |
|
|
|
const markerContent = `<div class="custom-content-marker"> |
|
|
|
<img src='${Rerm}' /> |
|
|
|
</div>`; |
|
|
|
const addMarker = (data) => { |
|
|
|
if(data.length==0) return |
|
|
|
if (Marker) { |
|
|
|
map.remove(Marker); |
|
|
|
} |
|
|
|
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); |
|
|
|
setMarker(marker); |
|
|
|
setTimeout(() => { |
|
|
|
map.setCenter(new AMap.LngLat(parseFloat(data[0]), parseFloat(data[1]))); |
|
|
|
}, 800); |
|
|
|
}; |
|
|
|
function clearMarkers(map) { |
|
|
|
map.eachLayer(function (layer) { |
|
|
|
if (layer instanceof L.Marker) { |
|
|
|
|
