UNPKG

4.17 kBJavaScriptView Raw
1import { __rest } from '../../node_modules/.pnpm/registry.npmjs.org_tslib@2.5.0/node_modules/tslib/tslib.es6.js';
2import './style.scss.js';
3import { stringify } from 'query-string';
4import { MethodHandler } from '../../utils/handler.js';
5
6function createLocationChooser(handler, key = LOCATION_APIKEY, mapOpt = {}) {
7 var _a, _b, _c;
8 const { latitude, longitude } = mapOpt, opts = __rest(mapOpt, ["latitude", "longitude"]);
9 const query = Object.assign({ key, type: 1, coord: ((_a = mapOpt.coord) !== null && _a !== void 0 ? _a : [latitude, longitude].every(e => Number(e) >= 0)) ? `${latitude},${longitude}` : undefined, referer: 'myapp' }, opts);
10 const html = `
11<div class='taro_choose_location'>
12 <div class='taro_choose_location_bar'>
13 <div class='taro_choose_location_back'></div>
14 <p class='taro_choose_location_title'>位置</p>
15 <button class='taro_choose_location_submit'>完成</button>
16 </div>
17 <iframe class='taro_choose_location_frame' frameborder='0' src="https://apis.map.qq.com/tools/locpicker?${stringify(query, { arrayFormat: 'comma', skipNull: true })}" />
18</div>
19`;
20 const container = document.createElement('div');
21 container.innerHTML = html;
22 const main = container.querySelector('.taro_choose_location');
23 function show() {
24 setTimeout(() => {
25 main.style.top = '0';
26 });
27 }
28 function hide() {
29 main.style.top = '100%';
30 }
31 function back() {
32 hide();
33 handler({ errMsg: 'cancel' });
34 }
35 function submit() {
36 hide();
37 handler();
38 }
39 function remove() {
40 container.remove();
41 window.removeEventListener('popstate', back);
42 }
43 (_b = container.querySelector('.taro_choose_location_back')) === null || _b === void 0 ? void 0 : _b.addEventListener('click', back);
44 (_c = container.querySelector('.taro_choose_location_submit')) === null || _c === void 0 ? void 0 : _c.addEventListener('click', submit);
45 window.addEventListener('popstate', back);
46 return {
47 show,
48 remove,
49 container
50 };
51}
52/**
53 * 打开地图选择位置。
54 */
55const chooseLocation = ({ success, fail, complete, mapOpts } = {}) => {
56 const key = LOCATION_APIKEY;
57 const handle = new MethodHandler({ name: 'chooseLocation', success, fail, complete });
58 return new Promise((resolve, reject) => {
59 const chooseLocation = {};
60 if (!key) {
61 console.warn('chooseLocation api 依赖腾讯地图定位api,需要在 defineConstants 中配置 LOCATION_APIKEY');
62 return handle.fail({
63 errMsg: 'LOCATION_APIKEY needed'
64 }, { resolve, reject });
65 }
66 const onMessage = event => {
67 // 接收位置信息,用户选择确认位置点后选点组件会触发该事件,回传用户的位置信息
68 const loc = event.data;
69 // 防止其他应用也会向该页面 post 信息,需判断 module 是否为'locationPicker'
70 if (!loc || loc.module !== 'locationPicker')
71 return;
72 chooseLocation.name = loc.poiname;
73 chooseLocation.address = loc.poiaddress;
74 chooseLocation.latitude = loc.latlng.lat;
75 chooseLocation.longitude = loc.latlng.lng;
76 };
77 const chooser = createLocationChooser(res => {
78 window.removeEventListener('message', onMessage, false);
79 setTimeout(() => {
80 chooser.remove();
81 }, 300);
82 if (res) {
83 return handle.fail(res, { resolve, reject });
84 }
85 else {
86 if (chooseLocation.latitude && chooseLocation.longitude) {
87 return handle.success(chooseLocation, { resolve, reject });
88 }
89 else {
90 return handle.fail({}, { resolve, reject });
91 }
92 }
93 }, key, mapOpts);
94 document.body.appendChild(chooser.container);
95 window.addEventListener('message', onMessage, false);
96 chooser.show();
97 });
98};
99
100export { chooseLocation };
101//# sourceMappingURL=chooseLocation.js.map