dev_1.2
tangjie 2026-07-29 15:48:14 +08:00
parent fe33611300
commit 1ed729316b
1 changed files with 34 additions and 16 deletions

View File

@ -1,6 +1,6 @@
import React, { useEffect, useRef, useState } from 'react'; import React, { useEffect, useRef, useState } from "react";
import { Modal, Input, message } from 'antd'; import { Modal, Input, message } from "antd";
import './index.less'; import "./index.less";
const BaiduMapPicker = ({ visible, onCancel, onConfirm }) => { const BaiduMapPicker = ({ visible, onCancel, onConfirm }) => {
const mapRef = useRef(null); const mapRef = useRef(null);
@ -8,7 +8,7 @@ const BaiduMapPicker = ({ visible, onCancel, onConfirm }) => {
const markerRef = useRef(null); const markerRef = useRef(null);
const [loaded, setLoaded] = useState(false); const [loaded, setLoaded] = useState(false);
const [selectedPoint, setSelectedPoint] = useState(null); const [selectedPoint, setSelectedPoint] = useState(null);
const [selectedAddress, setSelectedAddress] = useState(''); const [selectedAddress, setSelectedAddress] = useState("");
// 动态加载百度地图脚本 // 动态加载百度地图脚本
useEffect(() => { useEffect(() => {
@ -19,14 +19,26 @@ const BaiduMapPicker = ({ visible, onCancel, onConfirm }) => {
return; return;
} }
const scriptId = 'baiduMapScript'; const scriptId = "baiduMapScript";
if (document.getElementById(scriptId)) return; if (document.getElementById(scriptId)) return;
const callback = async () => {
await window.base.loadDynamicResource({
url: `https://api.map.baidu.com/api?v=3.0&ak=6lkWDSnHTCcvUenZhovQPER9nkhFfT9A&callback=__onBMapLoaded`,
type: "script",
attr: { type: "text/javascript" },
});
setLoaded(true);
};
if (window?.base?.loadDynamicResource) {
callback();
return;
}
window.__onBMapLoaded = () => { window.__onBMapLoaded = () => {
setLoaded(true); setLoaded(true);
}; };
const script = document.createElement('script'); const script = document.createElement("script");
script.id = scriptId; script.id = scriptId;
script.src = `https://api.map.baidu.com/api?v=3.0&ak=6lkWDSnHTCcvUenZhovQPER9nkhFfT9A&callback=__onBMapLoaded`; script.src = `https://api.map.baidu.com/api?v=3.0&ak=6lkWDSnHTCcvUenZhovQPER9nkhFfT9A&callback=__onBMapLoaded`;
script.async = true; script.async = true;
@ -49,10 +61,10 @@ const BaiduMapPicker = ({ visible, onCancel, onConfirm }) => {
mapInstanceRef.current = map; mapInstanceRef.current = map;
// 点击地图获取坐标 // 点击地图获取坐标
map.addEventListener('click', (e) => { map.addEventListener("click", (e) => {
const point = e.point; const point = e.point;
setSelectedPoint(point); setSelectedPoint(point);
setSelectedAddress(''); setSelectedAddress("");
if (markerRef.current) { if (markerRef.current) {
map.removeOverlay(markerRef.current); map.removeOverlay(markerRef.current);
} }
@ -71,10 +83,10 @@ const BaiduMapPicker = ({ visible, onCancel, onConfirm }) => {
// 搜索自动完成 // 搜索自动完成
const ac = new window.BMap.Autocomplete({ const ac = new window.BMap.Autocomplete({
input: 'baiduSearchInput', input: "baiduSearchInput",
location: map, location: map,
}); });
ac.addEventListener('onconfirm', (e) => { ac.addEventListener("onconfirm", (e) => {
const value = e.item.value; const value = e.item.value;
const local = new window.BMap.LocalSearch(map, { const local = new window.BMap.LocalSearch(map, {
onSearchComplete: (results) => { onSearchComplete: (results) => {
@ -82,7 +94,7 @@ const BaiduMapPicker = ({ visible, onCancel, onConfirm }) => {
const poi = results.getPoi(0); const poi = results.getPoi(0);
const point = poi.point; const point = poi.point;
setSelectedPoint(point); setSelectedPoint(point);
setSelectedAddress(poi.address || poi.title || ''); setSelectedAddress(poi.address || poi.title || "");
map.centerAndZoom(point, 15); map.centerAndZoom(point, 15);
if (markerRef.current) { if (markerRef.current) {
map.removeOverlay(markerRef.current); map.removeOverlay(markerRef.current);
@ -94,9 +106,15 @@ const BaiduMapPicker = ({ visible, onCancel, onConfirm }) => {
}, },
}); });
local.search( local.search(
[value.province, value.city, value.district, value.street, value.business] [
value.province,
value.city,
value.district,
value.street,
value.business,
]
.filter(Boolean) .filter(Boolean)
.join(''), .join(""),
); );
}); });
@ -110,7 +128,7 @@ const BaiduMapPicker = ({ visible, onCancel, onConfirm }) => {
if (!visible) { if (!visible) {
setLoaded(false); setLoaded(false);
setSelectedPoint(null); setSelectedPoint(null);
setSelectedAddress(''); setSelectedAddress("");
markerRef.current = null; markerRef.current = null;
mapInstanceRef.current = null; mapInstanceRef.current = null;
} }
@ -118,7 +136,7 @@ const BaiduMapPicker = ({ visible, onCancel, onConfirm }) => {
const handleConfirm = () => { const handleConfirm = () => {
if (!selectedPoint) { if (!selectedPoint) {
message.warning('请在地图上选择位置'); message.warning("请在地图上选择位置");
return; return;
} }