228 lines
15 KiB
JavaScript
228 lines
15 KiB
JavaScript
"use strict";
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
var tslib_1 = require("tslib");
|
|
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
var react_1 = tslib_1.__importStar(require("react"));
|
|
var antd_1 = require("antd");
|
|
var icons_1 = require("@ant-design/icons");
|
|
var react_amap_1 = require("@uiw/react-amap");
|
|
var map_1 = tslib_1.__importDefault(require("./../map"));
|
|
var PositionPicker_1 = tslib_1.__importDefault(require("./PositionPicker"));
|
|
require("./index.less");
|
|
var Location = function (props) {
|
|
var visible = props.visible, akey = props.akey, _a = props.version, version = _a === void 0 ? '2.0' : _a, onClose = props.onClose, onConfirm = props.onConfirm, _b = props.geolocationProps, geolocationProps = _b === void 0 ? {} : _b, _c = props.useGeolocation, useGeolocation = _c === void 0 ? true : _c, _d = props.dialogProps, dialogProps = _d === void 0 ? {} : _d;
|
|
var prefixCls = 'oak';
|
|
var searchRef = (0, react_1.useRef)();
|
|
var _e = tslib_1.__read((0, react_1.useState)(''), 2), searchValue = _e[0], setSearchValue = _e[1];
|
|
var _f = tslib_1.__read((0, react_1.useState)(true), 2), refresh = _f[0], setRefresh = _f[1]; // 点击poi不触发setPositionPickerResult
|
|
var _g = tslib_1.__read((0, react_1.useState)('dragMap'), 2), mode = _g[0], setMode = _g[1];
|
|
var _h = tslib_1.__read((0, react_1.useState)('全国'), 2), city = _h[0], setCity = _h[1];
|
|
var _j = tslib_1.__read((0, react_1.useState)(), 2), map = _j[0], setMap = _j[1];
|
|
var _k = tslib_1.__read((0, react_1.useState)(), 2), positionPickerResult = _k[0], setPositionPickerResult = _k[1];
|
|
var _l = tslib_1.__read((0, react_1.useState)(), 2), searchResult = _l[0], setSearchResult = _l[1];
|
|
var _m = tslib_1.__read((0, react_1.useState)(), 2), pois = _m[0], setPois = _m[1];
|
|
var _o = tslib_1.__read((0, react_1.useState)(), 2), currentPoi = _o[0], setCurrentPoi = _o[1];
|
|
var _p = tslib_1.__read((0, react_1.useState)(), 2), oldPois = _p[0], setOldPois = _p[1];
|
|
var _q = tslib_1.__read((0, react_1.useState)(), 2), oldPoi = _q[0], setOldPoi = _q[1];
|
|
var _r = tslib_1.__read((0, react_1.useState)(false), 2), loadUI = _r[0], setLoadUI = _r[1];
|
|
var _s = tslib_1.__read((0, react_1.useState)(false), 2), focus = _s[0], setFocus = _s[1];
|
|
var _t = tslib_1.__read((0, react_1.useState)(false), 2), searchLoading = _t[0], setSearchLoading = _t[1];
|
|
var _u = tslib_1.__read((0, react_1.useState)(false), 2), show = _u[0], setShow = _u[1];
|
|
var setCenter = function (center) {
|
|
if (map) {
|
|
map.setCenter(center);
|
|
}
|
|
};
|
|
var citySearch = function () {
|
|
return new Promise(function (resolve, reject) {
|
|
var _a;
|
|
(_a = window.AMap) === null || _a === void 0 ? void 0 : _a.plugin(['AMap.CitySearch'], function () {
|
|
var citySearchFn = new window.AMap.CitySearch();
|
|
citySearchFn.getLocalCity(function (status, result) {
|
|
if (status === 'complete') {
|
|
resolve(result);
|
|
}
|
|
else {
|
|
reject(result);
|
|
}
|
|
});
|
|
});
|
|
});
|
|
};
|
|
var placeSearch = function (value) {
|
|
// window.AMap存在再搜素
|
|
return new Promise(function (resolve, reject) { return tslib_1.__awaiter(void 0, void 0, void 0, function () {
|
|
var _a;
|
|
return tslib_1.__generator(this, function (_b) {
|
|
(_a = window.AMap) === null || _a === void 0 ? void 0 : _a.plugin(['AMap.PlaceSearch'], function () {
|
|
var placeSearchFn = new window.AMap.PlaceSearch({
|
|
pageSize: 20,
|
|
pageIndex: 1,
|
|
extensions: 'all',
|
|
city: city, //城市
|
|
});
|
|
placeSearchFn.search(value, function (status, result) {
|
|
if (status === 'complete') {
|
|
resolve(result);
|
|
}
|
|
else {
|
|
reject(result);
|
|
}
|
|
});
|
|
});
|
|
return [2 /*return*/];
|
|
});
|
|
}); });
|
|
};
|
|
(0, react_1.useEffect)(function () {
|
|
if (window.AMap && !window.AMapUI) {
|
|
var script = document.createElement('script');
|
|
script.type = 'text/javascript';
|
|
script.src = "".concat(window.location.protocol, "//webapi.amap.com/ui/1.1/main.js");
|
|
document.getElementsByTagName('head')[0].appendChild(script);
|
|
script.onload = function () {
|
|
setLoadUI(true);
|
|
};
|
|
script.onerror = function (error) {
|
|
setLoadUI(false);
|
|
};
|
|
}
|
|
else if (window.AMap && window.AMapUI) {
|
|
setLoadUI(true);
|
|
}
|
|
}, [window.AMap]);
|
|
(0, react_1.useEffect)(function () {
|
|
if (currentPoi && !refresh) {
|
|
var lngLat = new window.AMap.LngLat(currentPoi.location.lng, currentPoi.location.lat);
|
|
setCenter(lngLat);
|
|
}
|
|
}, [refresh, currentPoi]);
|
|
(0, react_1.useEffect)(function () {
|
|
// 拖动地图才触发
|
|
if (mode === 'dragMap' && positionPickerResult && refresh) {
|
|
var regeocode = positionPickerResult.regeocode;
|
|
var pois_1 = regeocode.pois, addressComponent_1 = regeocode.addressComponent;
|
|
var pois2 = pois_1 === null || pois_1 === void 0 ? void 0 : pois_1.map(function (poi, index) {
|
|
return tslib_1.__assign(tslib_1.__assign({}, poi), { pcode: '', citycode: addressComponent_1 === null || addressComponent_1 === void 0 ? void 0 : addressComponent_1.citycode, adcode: addressComponent_1.adcode, postcode: '', pname: addressComponent_1.province, cityname: addressComponent_1.city, adname: addressComponent_1 === null || addressComponent_1 === void 0 ? void 0 : addressComponent_1.district });
|
|
});
|
|
setPois(pois2);
|
|
setCurrentPoi(pois2[0]);
|
|
}
|
|
}, [refresh, positionPickerResult]);
|
|
(0, react_1.useEffect)(function () {
|
|
if (searchValue) {
|
|
setSearchLoading(true);
|
|
placeSearch(searchValue).then(function (result) {
|
|
var pois = (result === null || result === void 0 ? void 0 : result.poiList).pois;
|
|
setSearchResult(result);
|
|
setShow(true);
|
|
setSearchLoading(false);
|
|
setPois(pois);
|
|
// setCurrentPoi(pois[0]);
|
|
}, function (error) {
|
|
setSearchResult(undefined);
|
|
setShow(true);
|
|
setSearchLoading(false);
|
|
});
|
|
}
|
|
}, [searchValue]);
|
|
(0, react_1.useEffect)(function () {
|
|
if (mode === 'searchPoi') {
|
|
setOldPoi(currentPoi);
|
|
setOldPois(pois);
|
|
setPois([]);
|
|
setCurrentPoi(undefined);
|
|
}
|
|
else {
|
|
setPois(oldPois);
|
|
setCurrentPoi(oldPoi);
|
|
}
|
|
}, [mode]);
|
|
(0, react_1.useEffect)(function () {
|
|
if (visible && map && loadUI) {
|
|
setCenter(map.getCenter());
|
|
citySearch().then(function (result) {
|
|
if ((result === null || result === void 0 ? void 0 : result.info) === 'OK') {
|
|
setCity(result.city);
|
|
}
|
|
});
|
|
}
|
|
}, [visible, map, loadUI]);
|
|
var clearData = function () {
|
|
setMode('dragMap');
|
|
setFocus(false);
|
|
setShow(false);
|
|
setSearchValue('');
|
|
setRefresh(true);
|
|
};
|
|
return ((0, jsx_runtime_1.jsx)(antd_1.Modal, tslib_1.__assign({ width: "80%", okText: "\u786E\u5B9A", cancelText: "\u53D6\u6D88", title: "\u9009\u62E9\u4F4D\u7F6E" }, dialogProps, { open: visible, destroyOnClose: false, onCancel: function () {
|
|
onClose && onClose();
|
|
clearData();
|
|
}, onOk: function () {
|
|
if (!currentPoi) {
|
|
return;
|
|
}
|
|
onConfirm &&
|
|
onConfirm(currentPoi, mode === 'dragMap' ? positionPickerResult : searchResult);
|
|
clearData();
|
|
} }, { children: (0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ className: "".concat(prefixCls, "-location") }, { children: (0, jsx_runtime_1.jsxs)(antd_1.Row, tslib_1.__assign({ gutter: [16, 16] }, { children: [(0, jsx_runtime_1.jsx)(antd_1.Col, tslib_1.__assign({ xs: 24, sm: 14 }, { children: (0, jsx_runtime_1.jsxs)(map_1.default, tslib_1.__assign({ className: "".concat(prefixCls, "-location-map"), akey: akey, version: version, useAMapUI: true, mapRef: function (instance) {
|
|
if (instance && instance.map && !map) {
|
|
setMap(instance.map);
|
|
}
|
|
}, mapProps: {
|
|
onDragStart: function () {
|
|
setRefresh(true);
|
|
setMode('dragMap');
|
|
setSearchValue('');
|
|
setShow(false);
|
|
},
|
|
} }, { children: [(0, jsx_runtime_1.jsx)(PositionPicker_1.default, { loadUI: loadUI, __map__: map, onSuccess: function (result) {
|
|
setPositionPickerResult(result);
|
|
} }), useGeolocation && ((0, jsx_runtime_1.jsx)(react_amap_1.Geolocation, tslib_1.__assign({ maximumAge: 100000, borderRadius: "5px", position: "RB", offset: [10, 10], zoomToAccuracy: true, showCircle: true }, geolocationProps, { onComplete: function (data) { }, onError: function (err) {
|
|
console.error(err);
|
|
} })))] })) })), (0, jsx_runtime_1.jsx)(antd_1.Col, tslib_1.__assign({ xs: 24, sm: 10 }, { children: (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsxs)(antd_1.List, tslib_1.__assign({ className: "".concat(prefixCls, "-location-list"), header: (0, jsx_runtime_1.jsxs)("div", tslib_1.__assign({ className: "".concat(prefixCls, "-location-list-header") }, { children: [(0, jsx_runtime_1.jsx)(antd_1.Input, { ref: searchRef, placeholder: "\u641C\u7D22\u5730\u70B9", value: searchValue, allowClear: true, onChange: function (e) {
|
|
setSearchValue(e.target.value);
|
|
}, prefix: (0, jsx_runtime_1.jsx)(icons_1.SearchOutlined, {}), onFocus: function () {
|
|
setMode('searchPoi');
|
|
setFocus(true);
|
|
}, onBlur: function () {
|
|
setFocus(false);
|
|
} }), mode === 'searchPoi' && ((0, jsx_runtime_1.jsx)(antd_1.Button, tslib_1.__assign({ style: { marginLeft: 5 }, type: "link", onClick: function () {
|
|
var _a;
|
|
setMode('dragMap');
|
|
setSearchValue('');
|
|
setShow(false);
|
|
//@ts-ignore
|
|
(_a = searchRef === null || searchRef === void 0 ? void 0 : searchRef.current) === null || _a === void 0 ? void 0 : _a.blur();
|
|
} }, { children: "\u53D6\u6D88" })))] })) }, { children: [mode === 'dragMap' &&
|
|
(pois === null || pois === void 0 ? void 0 : pois.map(function (poi, index) {
|
|
return ((0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ onClick: function () {
|
|
setRefresh(false);
|
|
setCurrentPoi(poi);
|
|
} }, { children: (0, jsx_runtime_1.jsx)(antd_1.List.Item, tslib_1.__assign({ actions: [
|
|
(0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ style: {
|
|
width: 24,
|
|
} }, { children: (currentPoi === null || currentPoi === void 0 ? void 0 : currentPoi.id) ===
|
|
poi.id && ((0, jsx_runtime_1.jsx)(icons_1.CheckCircleFilled, { className: "".concat(prefixCls, "-location-list-checked") })) })),
|
|
] }, { children: (0, jsx_runtime_1.jsx)(antd_1.List.Item.Meta, { title: poi.name, description: "".concat(poi.distance
|
|
? "".concat(poi.distance, "m\u5185 | ")
|
|
: '').concat(poi.address) }) })) }), poi.id));
|
|
})), mode === 'searchPoi' && ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [searchLoading && ((0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ className: "".concat(prefixCls, "-location-list-loadingBox") }, { children: (0, jsx_runtime_1.jsx)(antd_1.Spin, { delay: 0, spinning: true, size: "default" }) }))), (pois === null || pois === void 0 ? void 0 : pois.length)
|
|
? pois.map(function (poi, index) {
|
|
return ((0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ onClick: function () {
|
|
setRefresh(false);
|
|
setCurrentPoi(poi);
|
|
} }, { children: (0, jsx_runtime_1.jsx)(antd_1.List.Item, tslib_1.__assign({ actions: [
|
|
(0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ style: {
|
|
width: 24,
|
|
} }, { children: (currentPoi === null || currentPoi === void 0 ? void 0 : currentPoi.id) ===
|
|
poi.id && ((0, jsx_runtime_1.jsx)(icons_1.CheckCircleFilled, { className: "".concat(prefixCls, "-location-list-checked") })) })),
|
|
] }, { children: (0, jsx_runtime_1.jsx)(antd_1.List.Item.Meta, { title: poi.name, description: "".concat(poi.distance
|
|
? "".concat(poi.distance, "m\u5185 | ")
|
|
: '').concat(poi.address) }) })) }), poi.id));
|
|
})
|
|
: show &&
|
|
!searchLoading && ((0, jsx_runtime_1.jsx)(antd_1.Empty, { description: "\u65E0\u641C\u7D22\u7ED3\u679C", image: antd_1.Empty.PRESENTED_IMAGE_SIMPLE }))] }))] })) }) }))] })) })) })));
|
|
};
|
|
exports.default = Location;
|