ccic-web/packages/component.amap/lib/mapPositioning/index.js

var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
    return new (P || (P = Promise))(function (resolve, reject) {
        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
        step((generator = generator.apply(thisArg, _arguments || [])).next());
    });
};
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React, { useState, useRef } from 'react';
import { Modal, Button, Radio } from 'antd';
import { getStorage } from '@component/utils';
import { useRequest, useSize } from 'ahooks';
import { isEmpty, compact, head, pick } from 'lodash';
import { GDMap } from '../map';
import style from './style.module.css';
import flagIcon from './flag.svg';
import { getIpPosition } from '../getIpPosition';
import './style.css';
// interface Props {
// 	lng?: string | number;
// 	lat?: string | number;
// 	address?: string;
// 	onConfirm:(data)=>void;
// 	onClose?: () => void;
// }
export default function Map(props) {
    const { onClose } = props;
    const size = useSize(document.body);
    const positionPickerRef = useRef();
    const [isModalVisible, setIsModalVisible] = useState(true);
    const [currentPos, setPos] = useState({});
    function f() {
        return __awaiter(this, void 0, void 0, function* () {
            const { lng, lat } = props;
            if (!isEmpty(compact([lng, lat]))) {
                return {
                    lng,
                    lat,
                    address,
                };
            }
            const position = getStorage('position');
            const array = position ? getStorage('position').split(',') : [];
            if (!isEmpty(array)) {
                return {
                    lng: array[0],
                    lat: array[1],
                    address: '',
                };
            }
            const coords = yield getIpPosition()
                .then(head)
                .then((result) => {
                return {
                    position: result.location.split(','),
                    formatted_address: result.formatted_address,
                };
            });
            if (!isEmpty(coords === null || coords === void 0 ? void 0 : coords.position)) {
                return {
                    lng: Number(coords.position[0]),
                    lat: Number(coords.position[1]),
                    address: coords.formatted_address,
                };
            }
            return {
                lng: 116.398784,
                lat: 39.910231,
                address: '',
            };
        });
    }
    const { data, loading } = useRequest(f, {
        onSuccess(response) {
            setPos(response);
        },
    });
    const { address = '', lng, lat } = currentPos;
    const onMapLoaded = (map) => {
        try {
            window.AMapUI.loadUI(['misc/PositionPicker'], function (PositionPicker) {
                positionPickerRef.current = new PositionPicker({
                    mode: 'dragMarker',
                    map: map,
                    iconStyle: {
                        //自定义外观
                        url: flagIcon,
                        ancher: [6, 32],
                        size: [32, 32],
                    },
                });
                positionPickerRef.current.on('success', function (positionResult = {}) {
                    const { address = '', position = {} } = positionResult;
                    setPos(Object.assign({ address }, position));
                });
                positionPickerRef.current.on('fail', function (positionResult = {}) {
                    const { address = '', position = {} } = positionResult;
                    setPos(Object.assign({ address }, position));
                });
                positionPickerRef.current.start();
            });
        }
        catch (e) {
            console.log(e, 'e');
        }
        map.plugin(['AMap.Autocomplete', 'AMap.LngLat'], function () {
            const auto = new AMap.Autocomplete({
                input: 'tipinput',
            });
            auto.on('select', select); //注册监听，当选中某条记录时会触发
            function select(e) {
                const poi = e.poi;
                setPos(Object.assign({ address: poi.name }, pick(poi.location, ['lng', 'lat'])));
                positionPickerRef.current.start(new AMap.LngLat(poi.location.lng, poi.location.lat));
            }
        });
    };
    function onChange(event) {
        positionPickerRef.current.setMode(event.target.value);
    }
    // 确定按钮的回调
    const confirmHandle = () => {
        props.onConfirm(currentPos);
        handleClose();
    };
    function handleClose() {
        if (onClose) {
            onClose();
        }
        else {
            setIsModalVisible(false);
        }
    }
    return (_jsx(Modal, Object.assign({ width: "90%", centered: true, title: _jsxs("div", Object.assign({ className: style['toolbar'] }, { children: [_jsx("div", { children: "\u9009\u62E9\u4F4D\u7F6E" }), _jsx(Radio.Group, { onChange: onChange, defaultValue: "dragMarker", options: [
                        { label: '拖拽Marker模式', value: 'dragMarker' },
                        { label: '拖拽地图模式', value: 'dragMap' },
                    ] })] })), bodyStyle: {
            height: (size === null || size === void 0 ? void 0 : size.height) ? (size === null || size === void 0 ? void 0 : size.height) * 0.8 : 500,
            padding: 0,
        }, open: isModalVisible, onOk: confirmHandle, onCancel: handleClose, footer: [
            _jsxs("span", Object.assign({ className: style['action'] }, { children: [_jsxs("span", { children: ["\u5F53\u524D\u9009\u62E9\u5730\u5740:", address] }), _jsxs("span", { children: ["\u7ECF\u7EAC\u5EA6:", lng && lat ? [lng, lat].join(',') : ''] })] }), "1"),
            _jsx(Button, Object.assign({ onClick: handleClose }, { children: "\u53D6\u6D88" }), "close"),
            _jsx(Button, Object.assign({ type: "primary", onClick: confirmHandle }, { children: "\u786E\u8BA4" }), "submit"),
        ] }, { children: _jsxs("div", Object.assign({ style: {
                height: '100%',
                position: 'relative',
            } }, { children: [_jsx("div", Object.assign({ className: "map-search-info" }, { children: _jsxs("div", Object.assign({ className: "map-search-input-item" }, { children: [_jsx("div", Object.assign({ className: "map-search-input-item-prepend" }, { children: _jsx("span", Object.assign({ className: "map-search-input-item-text" }, { children: "\u8BF7\u8F93\u5165\u5173\u952E\u5B57" })) })), _jsx("input", { id: "tipinput", type: "text", autoComplete: "off" })] })) })), !loading && (_jsx(GDMap, { aMapUI: true, containerClass: style['container'], loadedCallBack: onMapLoaded, options: {
                        resizeEnable: true,
                        center: [lng, lat],
                        zoom: 13,
                    } }))] })) })));
}