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