@cloudbase/weda-ui 3.2.0 → 3.3.0

package/dist/src/web/components/form/location/common/mapChoose.js

@@ -0,0 +1,496 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-nocheck
+import * as React from 'react';
+import classNames from '../../../../utils/classnames';
+import debounce from '../../../../utils/debounce';
+import { tmapApiUrl } from '../constants';
+import { getTMap, calculateDistance, base64LocationIcon } from './tmap';
+import './mapChoose.css';
+import { Icon } from 'tea-component';
+const { useEffect, useState, useRef, useMemo } = React;
+let relativePosition;
+const defaultLatLng = {
+    lat: null,
+    lng: null,
+};
+export default function MapChoose({ changeLocation, onConfirm, onClose, currentLocations, latlng = defaultLatLng, isPC, APIKEY = '', locationRange, customRange, setConfirmStatus, }) {
+    const { lat, lng } = latlng;
+    const mapRef = useRef();
+    const markerRef = useRef();
+    const centerRef = useRef();
+    const [isSearch, setIsSearch] = useState(false);
+    const [searchValue, setSearchValue] = useState('');
+    const [chooseLoc, setChooseLoc] = useState({
+        location: {
+            lat: null,
+            lng: null,
+        },
+        title: '',
+        address: '',
+        id: '',
+    });
+    const [exploreList, setExploreList] = useState([]);
+    const [searchList, setSearchList] = useState([]);
+    const mapDomName = Date.now();
+    const clientHeight = useMemo(() => document.documentElement.clientHeight, []);
+    const [mapBoxHeight, setMapBoxHeight] = useState(clientHeight - 328);
+    const [searchLoadingStatus, setSearchLoadingStatus] = useState(false);
+    const [isOutofrange, setIsOutofrange] = useState(false);
+    const [searchBoxHeight, setSearchBoxHeight] = useState(328);
+    const touchCoordinate = useRef({
+        startY: 0,
+        lastY: 0,
+    });
+    const searchListRef = useRef();
+    const searchListPageSize = useRef(1);
+    useEffect(() => {
+        if (!APIKEY || new RegExp('[\\u4E00-\\u9FFF]+', 'g').test(APIKEY))
+            return;
+        function loadScript() {
+            const script = document.createElement('script');
+            script.type = 'text/javascript';
+            script.src = `${tmapApiUrl}?v=2.exp&key=${APIKEY}&callback=init&libraries=service`;
+            script.onload = () => {
+                initMap();
+            };
+            script.onerror = (error) => {
+                console.error(' load mapchoose error success', APIKEY, error);
+            };
+            document.body.appendChild(script);
+        }
+        if (getTMap()) {
+            initMap();
+        }
+        else {
+            loadScript();
+        }
+        exploreNear('updateCenter');
+        return () => {
+            mapRef.current && mapRef.current.destroy();
+        };
+    }, [APIKEY]);
+    useEffect(() => {
+        setConfirmStatus(getConfirm());
+    }, [isOutofrange, chooseLoc.id]);
+    const initMap = () => {
+        if (!getTMap())
+            return;
+        const TMap = getTMap();
+        //定义地图中心点坐标
+        const center = new TMap.LatLng(lat, lng);
+        //定义map变量，调用 TMap.Map() 构造函数创建地图
+        mapRef.current = new TMap.Map(document.getElementById(`form-map-choose-${mapDomName}`), {
+            center,
+            zoom: 16, //设置地图缩放级别
+        });
+        initMarker(TMap, mapRef.current);
+        getRadius() && initCircle(TMap, mapRef.current);
+    };
+    const initMarker = (TMap, map) => {
+        const canLoad = lat && lng && TMap && map;
+        if (canLoad) {
+            const position = new TMap.LatLng(lat, lng);
+            const currentLocationsLatlng = currentLocations.latlng;
+            const currentLocationsPosition = new TMap.LatLng(currentLocationsLatlng.lat, currentLocationsLatlng.lng);
+            markerRef.current = new TMap.MultiMarker({
+                map: mapRef.current,
+                styles: {
+                    pointer: new TMap.MarkerStyle({
+                        width: 26,
+                        height: 35,
+                    }),
+                    originPointer: new window.TMap.MarkerStyle({
+                        width: 70,
+                        height: 70,
+                        src: base64LocationIcon,
+                        anchor: {
+                            x: 35,
+                            y: 30,
+                        },
+                    }),
+                },
+                geometries: [
+                    {
+                        id: `pointer-origin-${mapDomName}`,
+                        styleId: 'originPointer',
+                        position: currentLocationsPosition,
+                    },
+                    {
+                        id: `pointer-${mapDomName}`,
+                        styleId: 'pointer',
+                        position,
+                    },
+                ],
+            });
+            // 监听中心点变化事件，更新marker的位置
+            map.on('drag', mapDrag);
+        }
+    };
+    const initCircle = (TMap, map) => {
+        const currentLocationsLatlng = currentLocations.latlng;
+        const canLoad = lat && lng && currentLocationsLatlng && TMap && map;
+        if (canLoad) {
+            const nowPosition = new TMap.LatLng(currentLocationsLatlng.lat, currentLocationsLatlng.lng);
+            let circle = {
+                map,
+                styles: {
+                    circleColor: new TMap.CircleStyle({
+                        showBorder: true,
+                        borderColor: '#fff',
+                        borderWidth: 1,
+                    }),
+                },
+                geometries: [
+                    {
+                        styleId: 'circleColor',
+                        center: nowPosition,
+                        radius: getRadius(),
+                    },
+                ],
+            };
+            new TMap.MultiCircle(circle);
+        }
+    };
+    const mapDrag = () => {
+        const TMap = getTMap();
+        const canLoad = TMap && lat && lng && mapRef.current;
+        if (canLoad) {
+            const currentLocationsLatlng = currentLocations.latlng;
+            let centerPosition = mapRef.current.getCenter();
+            centerRef.current = centerPosition;
+            markerRef.current.updateGeometries([
+                {
+                    id: `pointer-${mapDomName}`,
+                    styleId: 'pointer',
+                    position: mapRef.current.getCenter(),
+                },
+            ]);
+            exploreNear('updateCenter');
+            // 计算距离
+            compareDistance(currentLocationsLatlng, {
+                lat: centerPosition.getLat(),
+                lng: centerPosition.getLng(),
+            });
+        }
+    };
+    const compareDistance = (currentLocation, centerPosition) => {
+        if (getRadius()) {
+            let latlng1 = {
+                latitude: currentLocation.lat,
+                longitude: currentLocation.lng,
+            };
+            let latlng2 = {
+                latitude: centerPosition.lat,
+                longitude: centerPosition.lng,
+            };
+            const distance = calculateDistance(latlng1, latlng2);
+            let isOutof = getRadius() && getRadius() < distance;
+            setIsOutofrange(isOutof);
+            if (!isPC) {
+                changeSearchBoxHeight(false, isOutof, true);
+            }
+        }
+    };
+    const handleFocus = (value) => {
+        changeSearchBoxHeight(true);
+        setIsSearch(value);
+    };
+    const exploreNear = debounce((type) => {
+        const { lat, lng } = centerRef.current || latlng;
+        let TMap = getTMap();
+        let search = new TMap.service.Search({ pageSize: 10 }); // 新建一个地点搜索类
+        if (type === 'updateCenter') {
+            searchListPageSize.current = 1;
+        }
+        setSearchLoadingStatus(true);
+        search
+            .explore({
+            center: new TMap.LatLng(lat, lng),
+            policy: 2,
+            radius: 1000,
+            pageIndex: searchListPageSize.current,
+        })
+            .then((res) => {
+            setSearchLoadingStatus(false);
+            if (res.status === 0) {
+                let list = [...exploreList, ...res.data];
+                if (searchListPageSize.current === 1) {
+                    list = res.data;
+                    setRealLocation({ lat, lng }, list);
+                }
+                else {
+                    setExploreList(list);
+                }
+            }
+            else {
+                setRealLocation({ lat, lng }, []);
+            }
+        })
+            .catch((error) => {
+            setSearchLoadingStatus(false);
+            setRealLocation({ lat, lng }, []);
+            console.error('explore error', error);
+        });
+    }, 500);
+    // 逆解析查询当前经纬度地址
+    const setRealLocation = (location, list) => {
+        const { lat, lng } = location;
+        let TMap = getTMap();
+        const Geocoder = new TMap.service.Geocoder();
+        Geocoder.getAddress({
+            location: new TMap.LatLng(lat, lng),
+        })
+            .then(({ status, result }) => {
+            var _a;
+            if (status == 0) {
+                let address = result.address;
+                let title = (_a = result === null || result === void 0 ? void 0 : result.formatted_addresses) === null || _a === void 0 ? void 0 : _a.recommend;
+                let item = {
+                    id: 'current-location',
+                    location: {
+                        lat,
+                        lng,
+                    },
+                    title: title ? title : address,
+                    address,
+                };
+                setChooseLoc(item);
+                changeLocation(item);
+                setExploreList([item, ...list]);
+            }
+        })
+            .catch((error) => {
+            console.error('getAddress error', error);
+            let item = {
+                id: 'current-location',
+                location: {
+                    lat,
+                    lng,
+                },
+                title: '[位置]',
+                address: '暂无地址信息',
+            };
+            setChooseLoc(item);
+            changeLocation(item);
+            setExploreList([item]);
+        });
+    };
+    const chooseLoction = (value, type) => {
+        const TMap = getTMap();
+        //定义地图中心点坐标
+        const center = new TMap.LatLng(value.location.lat, value.location.lng);
+        mapRef.current.setCenter(center);
+        markerRef.current.updateGeometries([
+            {
+                id: `pointer-${mapDomName}`,
+                styleId: 'pointer',
+                position: center,
+            },
+        ]);
+        setChooseLoc(value);
+        changeLocation(value);
+        if (type) {
+            setExploreList([]);
+            cancleSearch();
+            mapDrag();
+        }
+        else {
+            const currentLocationsLatlng = currentLocations.latlng;
+            compareDistance(currentLocationsLatlng, value.location);
+        }
+    };
+    const changeSearchValue = (event) => {
+        if (event.target.value) {
+            setSearchValue(event.target.value);
+            let TMap = getTMap();
+            let search = new TMap.service.Suggestion({ pageSize: 20 }); // 新建一个地点搜索类
+            search
+                .getSuggestions({
+                keyword: event.target.value,
+                location: new TMap.LatLng(lat, lng),
+                radius: 2000,
+                pageIndex: 1,
+            })
+                .then((res) => {
+                if (res.status === 0) {
+                    setSearchList(res.data);
+                }
+            })
+                .catch((error) => {
+                console.error('error', error);
+            });
+        }
+        else {
+            setSearchValue('');
+            // 不知道
+            // eslint-disable-next-line rulesdir/no-timer
+            setTimeout(() => {
+                setSearchList([]);
+            }, 300);
+        }
+    };
+    const cancleSearch = () => {
+        handleFocus(false);
+        setSearchValue('');
+        setSearchList([]);
+        changeSearchBoxHeight(false);
+    };
+    const renderMapView = () => {
+        return (React.createElement("div", { id: `form-map-choose-${mapDomName}`, style: { height: '100%', width: '100%', position: 'relative' } },
+            React.createElement("div", { className: "weda-ui_mapChoose_map_control", onClick: backToOrigin, onTouchEnd: backToOrigin },
+                React.createElement("img", { src: "https://qcloudimg.tencent-cloud.cn/raw/16f372916b73decb45faa912e37f6e6f.svg", className: "weda-ui_mapChoose_map_control_img", alt: "" }))));
+    };
+    const handletouchmove = (event) => {
+        document.getElementsByClassName('map-choose-header_search_input')[0].blur();
+        let currentY = event.changedTouches[0].clientY;
+        let status = currentY <= touchCoordinate.current.startY;
+        changeSearchBoxHeight(status);
+    };
+    const handletouchstart = (event) => {
+        document.getElementsByClassName('map-choose-header_search_input')[0].blur();
+        touchCoordinate.current.startY = event.changedTouches[0].clientY;
+    };
+    const changeSearchBoxHeight = (status, currentOutofrange, isInDrag) => {
+        // 搜索区域默认 328px ，上拉 75% ，当超出范围多一个超出提示 46px
+        let isOut = isInDrag ? currentOutofrange : isOutofrange;
+        const boxHeight = Math.ceil(clientHeight * 0.75);
+        let searchBoxHeights = isOut ? 328 - 46 : 328;
+        if (status) {
+            searchBoxHeights = isOut ? boxHeight - 46 : boxHeight;
+        }
+        setSearchBoxHeight(searchBoxHeights);
+        setMapBoxHeight(status ? clientHeight - boxHeight : clientHeight - 328);
+    };
+    const searchListOnScroll = () => {
+        getOnScrollDirection();
+        if (searchListPageSize.current === 5 || isSearch) {
+            return;
+        }
+        let scrollTop = searchListRef.current.scrollTop;
+        let clientHeight = searchListRef.current.clientHeight;
+        let scrollHeight = searchListRef.current.scrollHeight;
+        if (scrollTop + clientHeight + 1 >= scrollHeight) {
+            searchListPageSize.current++;
+            exploreNear();
+        }
+    };
+    const getOnScrollDirection = () => {
+        if ((searchBoxHeight !== 328 && searchBoxHeight !== 282) || isPC) {
+            return;
+        }
+        if (searchListRef.current.scrollTop > relativePosition) {
+            changeSearchBoxHeight(true);
+        }
+        relativePosition = searchListRef.current.scrollTop;
+    };
+    const renderSearchList = () => {
+        return (React.createElement("div", { className: classNames({
+                'weda-ui_mapChoose_search': true,
+                'weda-ui_mapChoose_search_pc': isPC,
+            }), style: { height: `${searchBoxHeight}px` }, onTouchStart: handletouchstart, onTouchMove: handletouchmove },
+            searchBoxHeight !== 328 && searchBoxHeight !== 282 && !isPC && (React.createElement("div", { className: "weda-ui_mapChoose_search_input_arrow", onClick: () => {
+                    changeSearchBoxHeight(false);
+                } },
+                React.createElement("span", { className: "weda-ui_mapChoose_search_input_arrow-con" }))),
+            React.createElement("div", { className: classNames({
+                    'map-choose-header': true,
+                    'map-choose-header_focus': isSearch,
+                }) },
+                React.createElement("div", { className: "map-choose-header_search" },
+                    React.createElement("input", { type: "text", onFocus: () => {
+                            handleFocus(true);
+                        }, onClick: (e) => {
+                            e.stopPropagation();
+                        }, onChange: changeSearchValue, value: searchValue, className: "map-choose-header_search_input" }),
+                    React.createElement("div", { className: classNames({
+                            'map-choose-header_search_place': true,
+                            'map-choose-header_search_place_value': searchValue,
+                        }) },
+                        React.createElement("img", { src: "https://qcloudimg.tencent-cloud.cn/raw/388c48cdcbe9ca07f5682fb10d05ebdd.png", alt: "" }),
+                        React.createElement("span", null, "\u641C\u7D22\u5730\u70B9")),
+                    searchValue && (React.createElement("div", { className: "weda-ui_mapChoose_search_input_clear", onClick: changeSearchValue },
+                        React.createElement("p", { className: "weda-ui_mapChoose_search_input_clear_close" })))),
+                React.createElement("span", { className: "map-choose-header_search_cancel", onClick: cancleSearch }, "\u53D6\u6D88")),
+            searchLoadingStatus && !isSearch && (React.createElement("div", { className: "weda-ui_mapChoose_search_list_lodading" },
+                React.createElement("span", { className: "weda-ui_mapChoose_search_list_lodading_con" }))),
+            React.createElement("div", { className: classNames({
+                    'weda-ui_mapChoose_search_list': true,
+                    'weda-ui_mapChoose_search_list_top': searchBoxHeight !== 328 && searchBoxHeight !== 282 && !isPC,
+                }), onTouchStart: (e) => {
+                    e.stopPropagation();
+                }, onTouchMove: (e) => {
+                    e.stopPropagation();
+                }, ref: searchListRef, onScroll: searchListOnScroll }, (isSearch ? searchList : exploreList).map((item, index) => (React.createElement("div", { key: index, className: "weda-ui_mapChoose_search_list_li", onClick: () => {
+                    chooseLoction(item, isSearch);
+                } },
+                React.createElement("div", { className: "weda-ui_mapChoose_search_list_li_wrap" },
+                    React.createElement("div", { className: "weda-ui_mapChoose_search_list_li_title" }, item.title),
+                    React.createElement("div", { className: "weda-ui_mapChoose_search_list_li_con" }, item.address),
+                    item.id === chooseLoc.id && (React.createElement("span", { className: "weda-ui_mapChoose_search_list_li_con_choosed" })))))))));
+    };
+    const renderOutTip = () => {
+        return (React.createElement("div", { className: classNames({
+                'weda-ui_mapChoose_outTip': true,
+                'weda-ui_mapChoose_outTip_block': isOutofrange,
+                'weda-ui_mapChoose_outTip_pc': isPC,
+            }) },
+            isOutofrange && (React.createElement(Icon, { type: "warning", size: "default", color: "#ED7B2F", style: { marginRight: '9px' } })),
+            isOutofrange && React.createElement("span", null, "\u5B9A\u4F4D\u8D85\u51FA\u5141\u8BB8\u8303\u56F4,\u8BF7\u8C03\u6574")));
+    };
+    const getRadius = () => {
+        let radius = 0;
+        if (locationRange > 0) {
+            radius = locationRange;
+        }
+        else if (locationRange < 0 && customRange > 0) {
+            radius = customRange;
+        }
+        return radius;
+    };
+    const backToOrigin = () => {
+        const TMap = getTMap();
+        const canLoad = TMap && lat && lng && mapRef.current;
+        if (canLoad) {
+            const currentLocationsLatlng = currentLocations.latlng;
+            const nowPosition = new TMap.LatLng(currentLocationsLatlng.lat, currentLocationsLatlng.lng);
+            markerRef.current.updateGeometries([
+                {
+                    id: `pointer-${mapDomName}`,
+                    styleId: 'pointer',
+                    position: nowPosition,
+                },
+            ]);
+            mapRef.current.setCenter(nowPosition);
+            searchListPageSize.current = 1;
+            setChooseLoc({});
+            mapDrag();
+        }
+    };
+    const getConfirm = () => {
+        return isOutofrange || !chooseLoc.id;
+    };
+    if (isPC) {
+        return (React.createElement("div", { className: classNames('map-choose', 'map-choose-pc', 'weda-ui_map-choose') },
+            renderOutTip(),
+            React.createElement("div", { className: classNames({
+                    'map-choose-pc_warp': true,
+                    'map-choose-pc_warp_out': isOutofrange,
+                }) },
+                React.createElement("div", { className: "map-choose-pc-left" }, renderSearchList()),
+                React.createElement("div", { className: "map-choose-pc-right" }, renderMapView()))));
+    }
+    return (React.createElement("div", { className: "map-choose weda-ui_map-choose" },
+        renderOutTip(),
+        React.createElement("div", { className: "weda-ui_mapChoose_map", style: { height: `${mapBoxHeight}px` } },
+            React.createElement("div", { className: "weda-ui_mapChoose_msg" },
+                React.createElement("div", { className: classNames({
+                        'weda-ui_mapChoose_confirm': true,
+                        'weda-ui_mapChoose_confirm_disable': getConfirm(),
+                    }), onClick: () => {
+                        !getConfirm() && onConfirm();
+                    } }, "\u786E\u5B9A"),
+                React.createElement("div", { className: "weda-ui_mapChoose_colse", onClick: onClose }, "\u53D6\u6D88")),
+            renderMapView()),
+        renderSearchList()));
+}

package/dist/src/web/components/form/location/common/mapView.d.ts

@@ -0,0 +1,19 @@
+declare function MapView({ APIKEY, drag, zoom, latlng, }: {
+    APIKEY?: string;
+    drag?: boolean;
+    zoom?: boolean;
+    latlng?: {
+        lat: any;
+        lng: any;
+    };
+}): JSX.Element;
+declare namespace MapView {
+    namespace propTypes {
+        const APIKEY: PropTypes.Requireable<string>;
+        const drag: PropTypes.Requireable<boolean>;
+        const zoom: PropTypes.Requireable<boolean>;
+        const latlng: PropTypes.Requireable<object>;
+    }
+}
+export default MapView;
+import * as PropTypes from "prop-types";

package/dist/src/web/components/form/location/common/mapView.js

@@ -0,0 +1,175 @@
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-nocheck
+import * as React from 'react';
+import * as PropTypes from 'prop-types';
+import { tmapApiUrl } from '../constants';
+import { getTMap } from '../common/tmap';
+const { useEffect, useRef, useState } = React;
+const defaultLatLng = {
+    lat: null,
+    lng: null,
+};
+export default function MapView({ APIKEY = '', drag = true, zoom = true, latlng = defaultLatLng, }) {
+    const mapRef = useRef();
+    const markerRef = useRef();
+    const mapDom = useRef();
+    const mapDomName = useRef(new Date().getTime());
+    const [mapStatus, setMapStatus] = useState(false);
+    const { lat, lng } = latlng;
+    const initMap = () => {
+        if (mapRef.current || !mapDom.current)
+            return;
+        try {
+            const TMap = getTMap();
+            //定义地图中心点坐标
+            const center = new TMap.LatLng(lat, lng);
+            //定义map变量，调用 TMap.Map() 构造函数创建地图
+            mapRef.current = new TMap.Map(mapDom.current, {
+                center,
+                zoom: 16,
+                minZoom: 3,
+                maxZoom: 20,
+            });
+            mapRef.current.setDraggable(drag);
+            removeOrAddZoom(mapRef.current, TMap);
+            initMarker();
+            setMapStatus(true);
+        }
+        catch (error) {
+            console.error('initMap error', error);
+        }
+    };
+    const initMarker = () => {
+        try {
+            const TMap = getTMap();
+            const canLoad = TMap && lat && lng && mapRef.current;
+            if (canLoad) {
+                const position = new TMap.LatLng(lat, lng);
+                markerRef.current = new TMap.MultiMarker({
+                    map: mapRef.current,
+                    styles: {
+                        pointer: new TMap.MarkerStyle({
+                            width: 26,
+                            height: 35,
+                        }),
+                    },
+                    geometries: [
+                        {
+                            id: `pointer-${mapDomName.current}`,
+                            styleId: 'pointer',
+                            position,
+                        },
+                    ],
+                });
+            }
+        }
+        catch (err) {
+            console.error('initMarker err', err);
+        }
+    };
+    useEffect(() => {
+        if (!APIKEY || new RegExp('[\\u4E00-\\u9FFF]+', 'g').test(APIKEY))
+            return;
+        function loadScript() {
+            // 移除之前的
+            if (document.getElementById('tmap-script')) {
+                document.body.removeChild(document.getElementById('tmap-script'));
+            }
+            const script = document.createElement('script');
+            script.type = 'text/javascript';
+            script.src = `${tmapApiUrl}?v=2.exp&key=${APIKEY}&callback=init&libraries=service`;
+            script.setAttribute('id', 'tmap-script');
+            script.onload = () => {
+                initMap();
+            };
+            script.onerror = (err) => {
+                console.error('loadScript err', err);
+            };
+            document.body.appendChild(script);
+        }
+        // 不知道
+        // eslint-disable-next-line rulesdir/no-timer
+        setTimeout(() => {
+            loadScript();
+        }, 1000);
+        return () => {
+            mapRef.current && mapRef.current.destroy();
+            mapRef.current = null;
+            setMapStatus(false);
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [APIKEY]);
+    useEffect(() => {
+        mapRef.current && mapRef.current.setDraggable(drag);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [drag, mapRef.current]);
+    useEffect(() => {
+        mapRef.current && getTMap() && removeOrAddZoom(mapRef.current, getTMap());
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [zoom, mapRef.current]);
+    useEffect(() => {
+        const TMap = getTMap();
+        const canLoad = TMap && lat && lng && mapRef.current && mapStatus;
+        if (canLoad) {
+            try {
+                const newLatLng = new TMap.LatLng(lat, lng);
+                mapRef.current.setCenter(newLatLng);
+                mapRef.current.panTo(newLatLng);
+                markerRef.current.updateGeometries([
+                    {
+                        styleId: 'pointer',
+                        id: `pointer-${mapDomName.current}`,
+                        position: newLatLng,
+                    },
+                ]);
+            }
+            catch (error) {
+                console.error('updateGeometries error view', error);
+            }
+        }
+    }, [lat, lng, mapStatus]);
+    // 缩放事件
+    const removeOrAddZoom = (map, TMap) => {
+        try {
+            let level = map.getZoom();
+            map.setScrollable(zoom);
+            map.setDoubleClickZoom(zoom);
+            // 缩放控件
+            if (zoom) {
+                addControl(map, TMap);
+                map.setMaxZoom(20);
+                map.setMinZoom(3);
+            }
+            else {
+                removeControl(map, TMap);
+                map.setMaxZoom(level);
+                map.setMinZoom(level);
+            }
+        }
+        catch (error) {
+            console.error('removeOrAddZoom error', error);
+        }
+    };
+    // 移除缩放控件
+    const removeControl = (map, TMap) => {
+        if (!map.getControl(TMap.constants.DEFAULT_CONTROL_ID.ZOOM)) {
+            return;
+        }
+        map.removeControl(TMap.constants.DEFAULT_CONTROL_ID.ZOOM);
+    };
+    // 缩放控件添加到地图上
+    const addControl = (map, TMap) => {
+        let control = map.getControl(TMap.constants.DEFAULT_CONTROL_ID.ZOOM);
+        if (!control) {
+            map.addControl(control);
+            control.setPosition(TMap.constants.CONTROL_POSITION.BOTTOM_RIGHT);
+        }
+    };
+    return (React.createElement("div", { ref: mapDom, id: `form-location-map-${mapDomName.current}`, style: { height: '100%', width: '100%' } }));
+}
+MapView.propTypes = {
+    APIKEY: PropTypes.string,
+    drag: PropTypes.bool,
+    zoom: PropTypes.bool,
+    latlng: PropTypes.object,
+};