fix
parent
fe33611300
commit
1ed729316b
|
|
@ -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,
|
||||
|
|
|
|||
Loading…
Reference in New Issue