amap
This commit is contained in:
parent
ce2fdcb197
commit
c41b28cb80
|
|
@ -16,34 +16,29 @@ var Location = function (props) {
|
||||||
var _e = tslib_1.__read((0, react_1.useState)(''), 2), searchValue = _e[0], setSearchValue = _e[1];
|
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 _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 _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), map = _h[0], setMap = _h[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), positionPickerResult = _j[0], setPositionPickerResult = _j[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), searchResult = _k[0], setSearchResult = _k[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), pois = _l[0], setPois = _l[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), currentPoi = _m[0], setCurrentPoi = _m[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), oldPois = _o[0], setOldPois = _o[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), oldPoi = _p[0], setOldPoi = _p[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)(false), 2), loadUI = _q[0], setLoadUI = _q[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), focus = _r[0], setFocus = _r[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), searchLoading = _s[0], setSearchLoading = _s[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), show = _t[0], setShow = _t[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) {
|
var setCenter = function (center) {
|
||||||
if (map) {
|
if (map) {
|
||||||
map.setCenter(center);
|
map.setCenter(center);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
var placeSearch = function (value) {
|
var citySearch = function () {
|
||||||
// window.AMap存在再搜素
|
|
||||||
return new Promise(function (resolve, reject) {
|
return new Promise(function (resolve, reject) {
|
||||||
var _a;
|
var _a;
|
||||||
(_a = window.AMap) === null || _a === void 0 ? void 0 : _a.plugin(['AMap.PlaceSearch'], function () {
|
(_a = window.AMap) === null || _a === void 0 ? void 0 : _a.plugin(['AMap.CitySearch'], function () {
|
||||||
var placeSearch = new window.AMap.PlaceSearch({
|
var citySearchFn = new window.AMap.CitySearch();
|
||||||
pageSize: 20,
|
citySearchFn.getLocalCity(function (status, result) {
|
||||||
pageIndex: 1,
|
|
||||||
extensions: 'all',
|
|
||||||
city: '全国', //城市
|
|
||||||
});
|
|
||||||
placeSearch.search(value, function (status, result) {
|
|
||||||
if (status === 'complete') {
|
if (status === 'complete') {
|
||||||
resolve(result);
|
resolve(result);
|
||||||
}
|
}
|
||||||
|
|
@ -54,6 +49,31 @@ var Location = function (props) {
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
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 () {
|
(0, react_1.useEffect)(function () {
|
||||||
if (window.AMap && !window.AMapUI) {
|
if (window.AMap && !window.AMapUI) {
|
||||||
var script = document.createElement('script');
|
var script = document.createElement('script');
|
||||||
|
|
@ -98,7 +118,7 @@ var Location = function (props) {
|
||||||
setShow(true);
|
setShow(true);
|
||||||
setSearchLoading(false);
|
setSearchLoading(false);
|
||||||
setPois(pois);
|
setPois(pois);
|
||||||
setCurrentPoi(pois[0]);
|
// setCurrentPoi(pois[0]);
|
||||||
}, function (error) {
|
}, function (error) {
|
||||||
setSearchResult(undefined);
|
setSearchResult(undefined);
|
||||||
setShow(true);
|
setShow(true);
|
||||||
|
|
@ -121,6 +141,11 @@ var Location = function (props) {
|
||||||
(0, react_1.useEffect)(function () {
|
(0, react_1.useEffect)(function () {
|
||||||
if (visible && map && loadUI) {
|
if (visible && map && loadUI) {
|
||||||
setCenter(map.getCenter());
|
setCenter(map.getCenter());
|
||||||
|
citySearch().then(function (result) {
|
||||||
|
if ((result === null || result === void 0 ? void 0 : result.info) === 'OK') {
|
||||||
|
setCity(result.city);
|
||||||
|
}
|
||||||
|
});
|
||||||
}
|
}
|
||||||
}, [visible, map, loadUI]);
|
}, [visible, map, loadUI]);
|
||||||
var clearData = function () {
|
var clearData = function () {
|
||||||
|
|
@ -130,7 +155,7 @@ var Location = function (props) {
|
||||||
setSearchValue('');
|
setSearchValue('');
|
||||||
setRefresh(true);
|
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, onCancel: function () {
|
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();
|
onClose && onClose();
|
||||||
clearData();
|
clearData();
|
||||||
}, onOk: function () {
|
}, onOk: function () {
|
||||||
|
|
|
||||||
|
|
@ -6,12 +6,20 @@ declare namespace AMap {
|
||||||
|
|
||||||
search(
|
search(
|
||||||
keyword: string,
|
keyword: string,
|
||||||
callback: (status: string, result: SearchResult) => void
|
callBack: (status: string, result: SearchResult) => void
|
||||||
): void;
|
): void;
|
||||||
|
|
||||||
setType(type: string): void;
|
setType(type: string): void;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
class CitySearch {
|
||||||
|
constructor();
|
||||||
|
|
||||||
|
getLocalCity(
|
||||||
|
callBack: (status: string, result: CitySearchResult) => void
|
||||||
|
): void;
|
||||||
|
}
|
||||||
|
|
||||||
type PlaceSearchOptions = {
|
type PlaceSearchOptions = {
|
||||||
pageSize?: number;
|
pageSize?: number;
|
||||||
pageIndex?: number;
|
pageIndex?: number;
|
||||||
|
|
@ -74,12 +82,12 @@ declare namespace AMap {
|
||||||
setCity?(city: string): void;
|
setCity?(city: string): void;
|
||||||
getLocation?(
|
getLocation?(
|
||||||
address: String,
|
address: String,
|
||||||
callback: (status: string, result: GeocodeResult) => void
|
callBack: (status: string, result: GeocodeResult) => void
|
||||||
): void;
|
): void;
|
||||||
|
|
||||||
getAddress?(
|
getAddress?(
|
||||||
location: LngLat | Array<LngLat>,
|
location: LngLat | Array<LngLat>,
|
||||||
callback: (status: string, result: ReGeocodeResult) => void
|
callBack: (status: string, result: ReGeocodeResult) => void
|
||||||
): void;
|
): void;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -129,4 +137,23 @@ declare namespace AMap {
|
||||||
info: string;
|
info: string;
|
||||||
regeocode: ReGeocode;
|
regeocode: ReGeocode;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
type CitySearchResult = {
|
||||||
|
info: string;
|
||||||
|
adcode: string;
|
||||||
|
city: string;
|
||||||
|
infocode: string;
|
||||||
|
province: string;
|
||||||
|
rectangle: string;
|
||||||
|
status: string;
|
||||||
|
bounds: AMap.Bounds;
|
||||||
|
};
|
||||||
|
|
||||||
|
type ControlType = AMap.ControlType | 'AMap.CitySearch';
|
||||||
|
|
||||||
|
// function plugin(
|
||||||
|
// ControlType: Array<ControlType>,
|
||||||
|
// callBack: () => void
|
||||||
|
// ): void;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -75,6 +75,7 @@ const Location = (props: LocationProps) => {
|
||||||
const [searchValue, setSearchValue] = useState<string>('');
|
const [searchValue, setSearchValue] = useState<string>('');
|
||||||
const [refresh, setRefresh] = useState(true); // 点击poi不触发setPositionPickerResult
|
const [refresh, setRefresh] = useState(true); // 点击poi不触发setPositionPickerResult
|
||||||
const [mode, setMode] = useState<Mode>('dragMap');
|
const [mode, setMode] = useState<Mode>('dragMap');
|
||||||
|
const [city, setCity] = useState<string>('全国');
|
||||||
|
|
||||||
const [map, setMap] = useState<AMap.Map>();
|
const [map, setMap] = useState<AMap.Map>();
|
||||||
|
|
||||||
|
|
@ -97,17 +98,34 @@ const Location = (props: LocationProps) => {
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const citySearch = (): Promise<AMap.CitySearchResult> => {
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
window.AMap?.plugin(['AMap.CitySearch' as AMap.ControlType], () => {
|
||||||
|
const citySearchFn = new window.AMap.CitySearch();
|
||||||
|
citySearchFn.getLocalCity(
|
||||||
|
(status: string, result: AMap.CitySearchResult) => {
|
||||||
|
if (status === 'complete') {
|
||||||
|
resolve(result);
|
||||||
|
} else {
|
||||||
|
reject(result);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
const placeSearch = (value: string): Promise<AMap.SearchResult> => {
|
const placeSearch = (value: string): Promise<AMap.SearchResult> => {
|
||||||
// window.AMap存在再搜素
|
// window.AMap存在再搜素
|
||||||
return new Promise((resolve, reject) => {
|
return new Promise(async (resolve, reject) => {
|
||||||
window.AMap?.plugin(['AMap.PlaceSearch'], () => {
|
window.AMap?.plugin(['AMap.PlaceSearch'], () => {
|
||||||
const placeSearch = new window.AMap.PlaceSearch({
|
const placeSearchFn = new window.AMap.PlaceSearch({
|
||||||
pageSize: 20,
|
pageSize: 20,
|
||||||
pageIndex: 1,
|
pageIndex: 1,
|
||||||
extensions: 'all',
|
extensions: 'all',
|
||||||
city: '全国', //城市
|
city: city, //城市
|
||||||
});
|
});
|
||||||
placeSearch.search(value, (status, result) => {
|
placeSearchFn.search(value, (status, result) => {
|
||||||
if (status === 'complete') {
|
if (status === 'complete') {
|
||||||
resolve(result);
|
resolve(result);
|
||||||
} else {
|
} else {
|
||||||
|
|
@ -182,7 +200,7 @@ const Location = (props: LocationProps) => {
|
||||||
setShow(true);
|
setShow(true);
|
||||||
setSearchLoading(false);
|
setSearchLoading(false);
|
||||||
setPois(pois);
|
setPois(pois);
|
||||||
setCurrentPoi(pois[0]);
|
// setCurrentPoi(pois[0]);
|
||||||
},
|
},
|
||||||
(error) => {
|
(error) => {
|
||||||
setSearchResult(undefined);
|
setSearchResult(undefined);
|
||||||
|
|
@ -210,6 +228,15 @@ const Location = (props: LocationProps) => {
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (visible && map && loadUI) {
|
if (visible && map && loadUI) {
|
||||||
setCenter(map.getCenter());
|
setCenter(map.getCenter());
|
||||||
|
citySearch().then(
|
||||||
|
(result) => {
|
||||||
|
if (result?.info === 'OK') {
|
||||||
|
setCity(result.city);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
);
|
||||||
}
|
}
|
||||||
}, [visible, map, loadUI]);
|
}, [visible, map, loadUI]);
|
||||||
|
|
||||||
|
|
@ -230,6 +257,7 @@ const Location = (props: LocationProps) => {
|
||||||
title="选择位置"
|
title="选择位置"
|
||||||
{...dialogProps}
|
{...dialogProps}
|
||||||
open={visible}
|
open={visible}
|
||||||
|
destroyOnClose={false}
|
||||||
onCancel={() => {
|
onCancel={() => {
|
||||||
onClose && onClose();
|
onClose && onClose();
|
||||||
clearData();
|
clearData();
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue