feat(h5): chooseLocation

# Conflicts:
#	packages/uni-cli-shared/src/api.ts
#	packages/uni-h5/dist/uni-h5.es.js

package.json

@@ -38,7 +38,7 @@
     "node": ">=10.0.0"
   },
   "devDependencies": {
-    "@dcloudio/types": "^2.2.3",
+    "@dcloudio/types": "^2.2.4",
     "@microsoft/api-extractor": "^7.13.2",
     "@rollup/plugin-alias": "^3.1.1",
     "@rollup/plugin-commonjs": "^17.0.0",

packages/uni-api/src/protocols/location/chooseLocation.ts

@@ -2,4 +2,6 @@ export const API_CHOOSE_LOCATION = 'chooseLocation'
 export type API_TYPE_CHOOSE_LOCATION = typeof uni.chooseLocation
 export const ChooseLocationProtocol: ApiProtocol<API_TYPE_CHOOSE_LOCATION> = {
   keyword: String,
+  latitude: Number,
+  longitude: Number,
 }

packages/uni-cli-shared/src/deps.ts

-import { BASE_COMPONENTS_STYLE_PATH, H5_API_STYLE_PATH } from './constants'
+import {
+  BASE_COMPONENTS_STYLE_PATH,
+  H5_COMPONENTS_STYLE_PATH,
+  H5_API_STYLE_PATH,
+} from './constants'
 
 const RESIZE_SENSOR_CSS = BASE_COMPONENTS_STYLE_PATH + 'resize-sensor.css'
 
@@ -14,6 +18,12 @@ export const API_DEPS_CSS = {
     `${BASE_COMPONENTS_STYLE_PATH}movable-view.css`,
   ],
   openLocation: [`${H5_API_STYLE_PATH}location-view.css`],
+  chooseLocation: [
+    `${H5_API_STYLE_PATH}/location-picker.css`,
+    `${BASE_COMPONENTS_STYLE_PATH}/input.css`,
+    `${H5_COMPONENTS_STYLE_PATH}/map.css`,
+    `${BASE_COMPONENTS_STYLE_PATH}/scroll-view.css`,
+  ],
 }
 
 export const COMPONENT_DEPS_CSS = {

packages/uni-core/src/helpers/icon.ts

@@ -34,6 +34,10 @@ export const ICON_PATH_WARN =
   'M15.808 0.16q-4.224 0-7.872 2.176-3.552 2.112-5.632 5.728-2.144 3.744-2.144 8.128 0 4.192 2.144 7.872 2.112 3.52 5.632 5.632 3.68 2.144 7.872 2.144 4.384 0 8.128-2.144 3.616-2.080 5.728-5.632 2.176-3.648 2.176-7.872 0-4.384-2.176-8.128-2.112-3.616-5.728-5.728-3.744-2.176-8.128-2.176zM15.136 8.672h1.728q0.128 0 0.224 0.096t0.096 0.256l-0.384 10.24q0 0.064-0.048 0.112t-0.112 0.048h-1.248q-0.096 0-0.144-0.048t-0.048-0.112l-0.384-10.24q0-0.16 0.096-0.256t0.224-0.096zM16 23.328q-0.48 0-0.832-0.352t-0.352-0.848 0.352-0.848 0.832-0.352 0.832 0.352 0.352 0.848-0.352 0.848-0.832 0.352z'
 export const ICON_PATH_BACK =
   'M21.781 7.844l-9.063 8.594 9.063 8.594q0.25 0.25 0.25 0.609t-0.25 0.578q-0.25 0.25-0.578 0.25t-0.578-0.25l-9.625-9.125q-0.156-0.125-0.203-0.297t-0.047-0.359q0-0.156 0.047-0.328t0.203-0.297l9.625-9.125q0.25-0.25 0.578-0.25t0.578 0.25q0.25 0.219 0.25 0.578t-0.25 0.578z'
+export const ICON_PATH_CLOSE =
+  'M17.25 16.156l7.375-7.313q0.281-0.281 0.281-0.641t-0.281-0.641q-0.25-0.25-0.625-0.25t-0.625 0.25l-7.375 7.344-7.313-7.344q-0.25-0.25-0.625-0.25t-0.625 0.25q-0.281 0.25-0.281 0.625t0.281 0.625l7.313 7.344-7.375 7.344q-0.281 0.25-0.281 0.625t0.281 0.625q0.125 0.125 0.281 0.188t0.344 0.063q0.156 0 0.328-0.063t0.297-0.188l7.375-7.344 7.375 7.406q0.125 0.156 0.297 0.219t0.328 0.063q0.188 0 0.344-0.078t0.281-0.203q0.281-0.25 0.281-0.609t-0.281-0.641l-7.375-7.406z'
+export const ICON_PATH_CONFIRM =
+  'M31.562 4.9966666659375q0.435 0.399 0.435 0.87 0.036 0.58-0.399 0.98l-18.61 19.917q-0.145 0.145-0.327 0.217-0.073 0.037-0.145 0.11-0.254 0.035-0.472 0.035-0.29 0-0.544-0.036l-0.145-0.072q-0.109-0.073-0.217-0.182l-0.11-0.072L0.363 16.2786666659375q-0.327-0.399-0.363-0.907 0-0.544 0.363-1.016 0.435-0.326 0.961-0.362 0.527-0.036 0.962 0.362l9.722 9.542L29.712 5.0326666659375q0.399-0.363 0.943-0.363 0.544-0.036 0.907 0.327z'
 
 export function createSvgIconVNode(
   path: string,

packages/uni-h5/dist/uni-h5.cjs.js

@@ -118,21 +118,21 @@ const initI18nVideoMsgsOnce = /* @__PURE__ */ uniShared.once(() => {
 function E() {
 }
 E.prototype = {
-  on: function(name, callback, ctx) {
+  on: function(name, callback2, ctx) {
     var e2 = this.e || (this.e = {});
     (e2[name] || (e2[name] = [])).push({
-      fn: callback,
+      fn: callback2,
       ctx
     });
     return this;
   },
-  once: function(name, callback, ctx) {
+  once: function(name, callback2, ctx) {
     var self = this;
     function listener() {
       self.off(name, listener);
-      callback.apply(ctx, arguments);
+      callback2.apply(ctx, arguments);
     }
-    listener._ = callback;
+    listener._ = callback2;
     return this.on(name, listener, ctx);
   },
   emit: function(name) {
@@ -145,13 +145,13 @@ E.prototype = {
     }
     return this;
   },
-  off: function(name, callback) {
+  off: function(name, callback2) {
     var e2 = this.e || (this.e = {});
     var evts = e2[name];
     var liveEvents = [];
-    if (evts && callback) {
+    if (evts && callback2) {
       for (var i2 = 0, len = evts.length; i2 < len; i2++) {
-        if (evts[i2].fn !== callback && evts[i2].fn._ !== callback)
+        if (evts[i2].fn !== callback2 && evts[i2].fn._ !== callback2)
           liveEvents.push(evts[i2]);
       }
     }
@@ -162,11 +162,11 @@ E.prototype = {
 function initBridge(namespace) {
   const emitter = new E();
   return shared.extend(emitter, {
-    subscribe(event, callback) {
-      emitter.on(`${namespace}.${event}`, callback);
+    subscribe(event, callback2) {
+      emitter.on(`${namespace}.${event}`, callback2);
     },
-    unsubscribe(event, callback) {
-      emitter.off(`${namespace}.${event}`, callback);
+    unsubscribe(event, callback2) {
+      emitter.off(`${namespace}.${event}`, callback2);
     },
     subscribeHandler(event, args, pageId) {
       if (process.env.NODE_ENV !== "production") {
@@ -207,6 +207,7 @@ const ICON_PATH_SUCCESS = "M15.808 0.16q-4.224 0-7.872 2.176-3.552 2.112-5.632 5
 const ICON_PATH_WAITING = "M15.84 0.096q-4.224 0-7.872 2.176-3.552 2.112-5.632 5.728-2.144 3.744-2.144 8.128 0 4.192 2.144 7.872 2.112 3.52 5.632 5.632 3.68 2.144 7.872 2.144 4.384 0 8.128-2.144 3.616-2.080 5.728-5.632 2.176-3.648 2.176-7.872 0-4.384-2.176-8.128-2.112-3.616-5.728-5.728-3.744-2.176-8.128-2.176zM23.008 21.92l-0.512 0.896q-0.096 0.128-0.224 0.064l-8-3.808q-0.096-0.064-0.16-0.128-0.128-0.096-0.128-0.288l0.512-12.096q0-0.064 0.048-0.112t0.112-0.048h1.376q0.064 0 0.112 0.048t0.048 0.112l0.448 10.848 6.304 4.256q0.064 0.064 0.080 0.128t-0.016 0.128z";
 const ICON_PATH_WARN = "M15.808 0.16q-4.224 0-7.872 2.176-3.552 2.112-5.632 5.728-2.144 3.744-2.144 8.128 0 4.192 2.144 7.872 2.112 3.52 5.632 5.632 3.68 2.144 7.872 2.144 4.384 0 8.128-2.144 3.616-2.080 5.728-5.632 2.176-3.648 2.176-7.872 0-4.384-2.176-8.128-2.112-3.616-5.728-5.728-3.744-2.176-8.128-2.176zM15.136 8.672h1.728q0.128 0 0.224 0.096t0.096 0.256l-0.384 10.24q0 0.064-0.048 0.112t-0.112 0.048h-1.248q-0.096 0-0.144-0.048t-0.048-0.112l-0.384-10.24q0-0.16 0.096-0.256t0.224-0.096zM16 23.328q-0.48 0-0.832-0.352t-0.352-0.848 0.352-0.848 0.832-0.352 0.832 0.352 0.352 0.848-0.352 0.848-0.832 0.352z";
 const ICON_PATH_BACK = "M21.781 7.844l-9.063 8.594 9.063 8.594q0.25 0.25 0.25 0.609t-0.25 0.578q-0.25 0.25-0.578 0.25t-0.578-0.25l-9.625-9.125q-0.156-0.125-0.203-0.297t-0.047-0.359q0-0.156 0.047-0.328t0.203-0.297l9.625-9.125q0.25-0.25 0.578-0.25t0.578 0.25q0.25 0.219 0.25 0.578t-0.25 0.578z";
+const ICON_PATH_CLOSE = "M17.25 16.156l7.375-7.313q0.281-0.281 0.281-0.641t-0.281-0.641q-0.25-0.25-0.625-0.25t-0.625 0.25l-7.375 7.344-7.313-7.344q-0.25-0.25-0.625-0.25t-0.625 0.25q-0.281 0.25-0.281 0.625t0.281 0.625l7.313 7.344-7.375 7.344q-0.281 0.25-0.281 0.625t0.281 0.625q0.125 0.125 0.281 0.188t0.344 0.063q0.156 0 0.328-0.063t0.297-0.188l7.375-7.344 7.375 7.406q0.125 0.156 0.297 0.219t0.328 0.063q0.188 0 0.344-0.078t0.281-0.203q0.281-0.25 0.281-0.609t-0.281-0.641l-7.375-7.406z";
 function createSvgIconVNode(path, color = "#000", size = 27) {
   return vue.createVNode("svg", {
     width: size,
@@ -268,15 +269,15 @@ function createCallbacks(namespace) {
       return scopedCallbacks.callbacks[id];
     },
     pop(id) {
-      const callback = scopedCallbacks.callbacks[id];
-      if (callback) {
+      const callback2 = scopedCallbacks.callbacks[id];
+      if (callback2) {
         delete scopedCallbacks.callbacks[id];
       }
-      return callback;
+      return callback2;
     },
-    push(callback) {
+    push(callback2) {
       const id = scopedCallbacks.id++;
-      scopedCallbacks.callbacks[id] = callback;
+      scopedCallbacks.callbacks[id] = callback2;
       return id;
     }
   };
@@ -617,11 +618,11 @@ function tryCatch(fn) {
 }
 let invokeCallbackId = 1;
 const invokeCallbacks = {};
-function addInvokeCallback(id, name, callback, keepAlive = false) {
+function addInvokeCallback(id, name, callback2, keepAlive = false) {
   invokeCallbacks[id] = {
     name,
     keepAlive,
-    callback
+    callback: callback2
   };
   return id;
 }
@@ -808,8 +809,8 @@ function getRealPath(filePath) {
   }
   return filePath;
 }
-function saveImage(base64, dirname, callback) {
-  callback(null, base64);
+function saveImage(base64, dirname, callback2) {
+  callback2(null, base64);
 }
 const files = {};
 function urlToFile(url, local) {
@@ -903,17 +904,17 @@ const upx2px = /* @__PURE__ */ defineSyncApi(API_UPX2PX, (number, newDeviceWidth
 }, Upx2pxProtocol);
 const canvasEventCallbacks = createCallbacks("canvasEvent");
 ServiceJSBridge.subscribe("onCanvasMethodCallback", ({callbackId, data}) => {
-  const callback = canvasEventCallbacks.pop(callbackId);
-  if (callback) {
-    callback(data);
+  const callback2 = canvasEventCallbacks.pop(callbackId);
+  if (callback2) {
+    callback2(data);
   }
 });
 const API_ON_TAB_BAR_MID_BUTTON_TAP = "onTabBarMidButtonTap";
 const getSelectedTextRangeEventCallbacks = createCallbacks("getSelectedTextRangeEvent");
 ServiceJSBridge.subscribe && ServiceJSBridge.subscribe("onGetSelectedTextRange", ({callbackId, data}) => {
-  const callback = getSelectedTextRangeEventCallbacks.pop(callbackId);
-  if (callback) {
-    callback(data);
+  const callback2 = getSelectedTextRangeEventCallbacks.pop(callbackId);
+  if (callback2) {
+    callback2(data);
   }
 });
 const API_GET_STORAGE = "getStorage";
@@ -3625,10 +3626,10 @@ function useMovableAreaState(props2, rootRef) {
     }
   };
 }
-const addListenerToElement = function(element, type, callback, capture) {
+const addListenerToElement = function(element, type, callback2, capture) {
   element.addEventListener(type, ($event) => {
-    if (typeof callback === "function") {
-      if (callback($event) === false) {
+    if (typeof callback2 === "function") {
+      if (callback2($event) === false) {
         if (typeof $event.cancelable !== "undefined" ? $event.cancelable : true) {
           $event.preventDefault();
         }
@@ -7634,7 +7635,7 @@ function useLayout(props2, state, swiperContexts, slideFrameRef, emit2, trigger)
   function scheduleAutoplay() {
     cancelSchedule();
     const items = swiperContexts.value;
-    const callback = function() {
+    const callback2 = function() {
       timer = null;
       currentChangeSource = "autoplay";
       if (circularEnabled.value) {
@@ -7643,10 +7644,10 @@ function useLayout(props2, state, swiperContexts, slideFrameRef, emit2, trigger)
         state.current = state.current + state.displayMultipleItems < items.length ? state.current + 1 : 0;
       }
       animateViewport(state.current, "autoplay", circularEnabled.value ? 1 : 0);
-      timer = setTimeout(callback, state.interval);
+      timer = setTimeout(callback2, state.interval);
     };
     if (!(invalid || items.length <= state.displayMultipleItems)) {
-      timer = setTimeout(callback, state.interval);
+      timer = setTimeout(callback2, state.interval);
     }
   }
   function resetLayout() {
@@ -8199,12 +8200,12 @@ var index$6 = /* @__PURE__ */ defineBuiltInComponent({
     };
   }
 });
-function useSubscribe(callback, name) {
+function useSubscribe(callback2, name) {
   const instance = vue.getCurrentInstance();
   instance.proxy;
   name ? 0 : useCurrentPageId();
 }
-function useOn(name, callback) {
+function useOn(name, callback2) {
 }
 function formatTime(val) {
   val = val > 0 && val < Infinity ? val : 0;
@@ -9028,6 +9029,26 @@ function useWebViewSize(rootRef, iframeRef) {
   };
   return _resize;
 }
+function callback(options, data) {
+  options = options || {};
+  if (typeof data === "string") {
+    data = {
+      errMsg: data
+    };
+  }
+  if (/:ok$/.test(data.errMsg)) {
+    if (typeof options.success === "function") {
+      options.success(data);
+    }
+  } else {
+    if (typeof options.fail === "function") {
+      options.fail(data);
+    }
+  }
+  if (typeof options.complete === "function") {
+    options.complete(data);
+  }
+}
 const props$4 = {
   id: {
     type: [Number, String],
@@ -9537,6 +9558,7 @@ var MapControl = /* @__PURE__ */ defineSystemComponent({
     };
   }
 });
+const CONTEXT_ID = "MAP_LOCATION";
 const ICON_PATH = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIQAAACECAMAAABmmnOVAAAC01BMVEUAAAAAef8Aef8Aef8Aef8Aef8Aef8Aef8Aef8Aef8Aef8Aef8Aef8Aef8Aef8Aef8Aef8Aef8Aef8Aef8Aef8Aef8Aef8Aef8Aef8Aef8Aef8Aef8Aef8Aef8Aef8Aef8Aef8Aef8Aef8Aef8Aef8Aef8Aef8Aef8Aef8Aef8Aef8Aef8Aef8Aef8Aef8Aef8Aef8Aef96quGStdqStdpbnujMzMzCyM7Gyc7Ky83MzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMwAef8GfP0yjfNWnOp0qOKKsdyYt9mju9aZt9mMstx1qeJYnekyjvIIfP0qivVmouaWttnMzMyat9lppOUujPQKffxhoOfNzc3Y2Njh4eHp6enu7u7y8vL19fXv7+/i4uLZ2dnOzs6auNgOf/sKff15quHR0dHx8fH9/f3////j4+N6quFdn+iywdPb29vw8PD+/v7c3NyywtLa2tr29vbS0tLd3d38/Pzf39/o6Ojc7f+q0v+HwP9rsf9dqv9Hnv9Vpv/q6urj8P+Vx/9Am/8Pgf8Iff/z8/OAvP95uf/n5+c5l//V6f+52v+y1//7+/vt7e0rkP/09PTQ0NDq9P8Whf+cy//W1tbe3t7A3v/m5ubs7OxOov/r6+vk5OQiaPjKAAAAknRSTlMACBZ9oB71/jiqywJBZATT6hBukRXv+zDCAVrkDIf4JbQsTb7eVeJLbwfa8Rh4G/OlPS/6/kxQ9/xdmZudoJxNVhng7B6wtWdzAtQOipcF1329wS44doK/BAkyP1pvgZOsrbnGXArAg34G2IsD1eMRe7bi7k5YnqFT9V0csyPedQyYD3p/Fje+hDpskq/MwpRBC6yKp2MAAAQdSURBVHja7Zn1exMxGIAPHbrhDsPdneHuNtzd3d3dIbjLh93o2o4i7TpgG1Jk0g0mMNwd/gTa5rq129reHnK5e/bk/TFNk/dJ7r5894XjGAwGg8GgTZasCpDIll1+hxw5vXLJLpEboTx5ZXbIhyzkl9fB28cqUaCgrBKFkI3CcjoUKYolihWXUSI7EihRUjaHXF52CVRKLoe8eZIdUOkyMknkRw6UlcehYAFHiXK+skgURk6Ul8OhQjFnCVRRBolKqRxQ5SzUHaqgNGSj7VCmalqJnDkoS5RF6ZCbroNvufQkUD6qEuXTdUA+3hQdqiEXVKfnUKOmK4latalJ1EEuoZZ6162HJ9x/4OChw0eOHj12/MTJU6dxG7XUu751tjNnz4ET5y9ctLZTSr0beKFLl89bpuUDrqgC1RqNWqsKuqqzNFw7e51S6u3tc+OmZUJ9kCHY6ECwOkRvab51iUrqXej2HYDQsHBjWgx3Ae7dppB6N2wEcF9jdMGDUIDGTaR2aNoM9FqjG7QmaN5CWgc/gIePjG559BigpZQOrYB/4jBfRGRUtDkmJjY6KjLCofkpD62lc2gDfMpWPIuLdwyV8XEpHgaddBZ+wBuSFcwJqSN2ovmZ/dfnOvCTxqGtwzq8SEjv4EhISn48eWgnhUP7DvDSvgzxrs6vV6+FLiro2EkCic4QKkzwJsH1KYreCp0eQhfyDl1B/w4P/xa5JVJ4U03QjbRD9x7wXlgH5IE3wmMBHXoSlugFAcI6f/AkkSi8q6HQm6xDn77wEQ8djTwSj3tqAMguRTe4ikeOQyJ4YV+KfkQl+oNW5GbY4gWOWgbwJ+kwAD6Fi90MK2ZsrIeBBCUGwRXbqJ+/iJMQliIEBhOU6AJhtlG/IpHE2bqrYQg5h6HA4yQiRqwEfkGCdTCMmMRw+IbPDCQaHCsCYAQxiZHw3TbmD/ESOHgHwShiEqPhp/gggYkSztIxxCRawy/bmEniJaJtfwiEscQkxkFgRqJESqQwwHhiEuMBp3Vm8RK/cZoHEzKXhCK2QxEPpiJe0YlKCFaKCNv/cYBNUsBRPlkJSc0U+dM7E9H0ThGJbgZT/iR7yj+VqMS06Qr4+OFm2JdCxIa8lugzkJs5K6MfxAaYPUcBpYG5khZJEkUUSb7DPCnKRfPBXj6M8FwuegoLpCgXcQszVjhbJFUJUee2hBhLoYTIcYtB57KY+opSMdVqwatSlZVj05aV//CwJLMX2DluaUcwhXm4ali2XOoLjxUrPV26zFtF4f5p0Gp310+z13BUWNvbehEXona6iAtX/zVZmtfN4WixfsNky4S6gCCVVq3RPLdfSfpv3MRRZfPoLc6Xs/5bt3EyMGzE9h07/Xft2t15z6i9+zgGg8FgMBgMBoPBYDAYDAYj8/APG67Rie8pUDsAAAAASUVORK5CYII=";
 var MapLocation = /* @__PURE__ */ defineSystemComponent({
   name: "MapLocation",
@@ -9627,12 +9649,17 @@ function getPoints(points) {
 }
 function useMap(props2, rootRef, emit2) {
   const mapRef = vue.ref(null);
+  let maps;
+  let map;
   const state = vue.reactive({
     latitude: Number(props2.latitude),
     longitude: Number(props2.longitude),
     includePoints: getPoints(props2.includePoints)
   });
-  function onMapReady(callback) {
+  function onMapReady(callback2) {
+  }
+  let isBoundsReady;
+  function onBoundsReady(callback2) {
   }
   const contexts = {};
   function addMapChidlContext(context) {
@@ -9654,7 +9681,107 @@ function useMap(props2, rootRef, emit2) {
   }, {
     deep: true
   });
-  useSubscribe();
+  function updateBounds() {
+    const bounds = new maps.LatLngBounds();
+    state.includePoints.forEach(({
+      latitude,
+      longitude
+    }) => {
+      const latLng = new maps.LatLng(latitude, longitude);
+      bounds.extend(latLng);
+    });
+    map.fitBounds(bounds);
+  }
+  try {
+    useSubscribe((type, data = {}) => {
+      switch (type) {
+        case "getCenterLocation":
+          onMapReady(() => {
+            const center = map.getCenter();
+            callback(data, {
+              latitude: center.getLat(),
+              longitude: center.getLng(),
+              errMsg: `${type}:ok`
+            });
+          });
+          break;
+        case "moveToLocation":
+          {
+            let latitude = Number(data.latitude);
+            let longitude = Number(data.longitude);
+            if (!latitude || !longitude) {
+              const context = contexts[CONTEXT_ID];
+              if (context) {
+                latitude = context.state.latitude;
+                longitude = context.state.longitude;
+              }
+            }
+            if (latitude && longitude) {
+              state.latitude = latitude;
+              state.longitude = longitude;
+              if (map)
+                ;
+              onMapReady(() => {
+                callback(data, `${type}:ok`);
+              });
+            } else {
+              callback(data, `${type}:fail`);
+            }
+          }
+          break;
+        case "translateMarker":
+          onMapReady(() => {
+            const context = contexts[data.markerId];
+            if (context) {
+              try {
+                context.translate(data);
+              } catch (error) {
+                callback(data, `${type}:fail ${error.message}`);
+              }
+              callback(data, `${type}:ok`);
+            } else {
+              callback(data, `${type}:fail not found`);
+            }
+          });
+          break;
+        case "includePoints":
+          state.includePoints = getPoints(data.includePoints);
+          if (isBoundsReady)
+            ;
+          onBoundsReady(() => {
+            callback(data, `${type}:ok`);
+          });
+          break;
+        case "getRegion":
+          onBoundsReady(() => {
+            const latLngBounds = map.getBounds();
+            const southwest = latLngBounds.getSouthWest();
+            const northeast = latLngBounds.getNorthEast();
+            callback(data, {
+              southwest: {
+                latitude: southwest.getLat(),
+                longitude: southwest.getLng()
+              },
+              northeast: {
+                latitude: northeast.getLat(),
+                longitude: northeast.getLng()
+              },
+              errMsg: `${type}:ok`
+            });
+          });
+          break;
+        case "getScale":
+          onMapReady(() => {
+            callback(data, {
+              scale: map.getZoom(),
+              errMsg: `${type}:ok`
+            });
+          });
+          break;
+      }
+    });
+  } catch (error) {
+  }
   vue.provide("onMapReady", onMapReady);
   vue.provide("addMapChidlContext", addMapChidlContext);
   vue.provide("removeMapChidlContext", removeMapChidlContext);
@@ -10682,10 +10809,10 @@ class RequestTask {
       delete this._xhr;
     }
   }
-  onHeadersReceived(callback) {
+  onHeadersReceived(callback2) {
     throw new Error("Method not implemented.");
   }
-  offHeadersReceived(callback) {
+  offHeadersReceived(callback2) {
     throw new Error("Method not implemented.");
   }
 }
@@ -11233,7 +11360,7 @@ const ICON_PATHS = {
   favorite: "M27.594 13.375q-0.063-0.188-0.219-0.313t-0.344-0.156l-7.094-0.969-3.219-6.406q-0.094-0.188-0.25-0.281t-0.375-0.094q-0.188 0-0.344 0.094t-0.25 0.281l-3.125 6.438-7.094 1.094q-0.188 0.031-0.344 0.156t-0.219 0.313q-0.031 0.188 0.016 0.375t0.172 0.313l5.156 4.969-1.156 7.063q-0.031 0.188 0.047 0.375t0.234 0.313q0.094 0.063 0.188 0.094t0.219 0.031q0.063 0 0.141-0.031t0.172-0.063l6.313-3.375 6.375 3.313q0.063 0.031 0.141 0.047t0.172 0.016q0.188 0 0.344-0.094t0.25-0.281q0.063-0.094 0.078-0.234t-0.016-0.234q0-0.031 0-0.063l-1.25-6.938 5.094-5.031q0.156-0.156 0.203-0.344t-0.016-0.375zM11.469 19.063q0.031-0.188-0.016-0.344t-0.172-0.281l-4.406-4.25 6.063-0.906q0.156-0.031 0.297-0.125t0.203-0.25l2.688-5.531 2.75 5.5q0.063 0.156 0.203 0.25t0.297 0.125l6.094 0.844-4.375 4.281q-0.125 0.125-0.172 0.297t-0.016 0.328l1.063 6.031-5.438-2.813q-0.156-0.094-0.328-0.078t-0.297 0.078l-5.438 2.875 1-6.031z",
   home: "M23.719 16.5q-0.313 0-0.531 0.219t-0.219 0.5v7.063q0 0.219-0.172 0.391t-0.391 0.172h-12.344q-0.25 0-0.422-0.172t-0.172-0.391v-7.063q0-0.281-0.219-0.5t-0.531-0.219q-0.281 0-0.516 0.219t-0.234 0.5v7.063q0.031 0.844 0.625 1.453t1.438 0.609h12.375q0.844 0 1.453-0.609t0.609-1.453v-7.063q0-0.125-0.063-0.266t-0.156-0.234q-0.094-0.125-0.234-0.172t-0.297-0.047zM26.5 14.875l-8.813-8.813q-0.313-0.313-0.688-0.453t-0.781-0.141-0.781 0.141-0.656 0.422l-8.813 8.844q-0.188 0.219-0.188 0.516t0.219 0.484q0.094 0.125 0.234 0.172t0.297 0.047q0.125 0 0.25-0.047t0.25-0.141l8.781-8.781q0.156-0.156 0.406-0.156t0.406 0.156l8.813 8.781q0.219 0.188 0.516 0.188t0.516-0.219q0.188-0.188 0.203-0.484t-0.172-0.516z",
   menu: "M8.938 18.313q0.875 0 1.484-0.609t0.609-1.453-0.609-1.453-1.484-0.609q-0.844 0-1.453 0.609t-0.609 1.453 0.609 1.453 1.453 0.609zM16.188 18.313q0.875 0 1.484-0.609t0.609-1.453-0.609-1.453-1.484-0.609q-0.844 0-1.453 0.609t-0.609 1.453 0.609 1.453 1.453 0.609zM23.469 18.313q0.844 0 1.453-0.609t0.609-1.453-0.609-1.453-1.453-0.609q-0.875 0-1.484 0.609t-0.609 1.453 0.609 1.453 1.484 0.609z",
-  close: "M17.25 16.156l7.375-7.313q0.281-0.281 0.281-0.641t-0.281-0.641q-0.25-0.25-0.625-0.25t-0.625 0.25l-7.375 7.344-7.313-7.344q-0.25-0.25-0.625-0.25t-0.625 0.25q-0.281 0.25-0.281 0.625t0.281 0.625l7.313 7.344-7.375 7.344q-0.281 0.25-0.281 0.625t0.281 0.625q0.125 0.125 0.281 0.188t0.344 0.063q0.156 0 0.328-0.063t0.297-0.188l7.375-7.344 7.375 7.406q0.125 0.156 0.297 0.219t0.328 0.063q0.188 0 0.344-0.078t0.281-0.203q0.281-0.25 0.281-0.609t-0.281-0.641l-7.375-7.406z"
+  close: ICON_PATH_CLOSE
 };
 var PageHead = /* @__PURE__ */ defineSystemComponent({
   name: "PageHead",

packages/uni-h5/src/framework/components/page/pageHead.tsx

@@ -8,6 +8,7 @@ import {
   createSvgIconVNode,
   ICON_PATH_SEARCH,
   ICON_PATH_BACK,
+  ICON_PATH_CLOSE,
 } from '@dcloudio/uni-core'
 import { usePageMeta } from '../../setup/provide'
 import {
@@ -26,8 +27,7 @@ const ICON_PATHS = {
     'M27.594 13.375q-0.063-0.188-0.219-0.313t-0.344-0.156l-7.094-0.969-3.219-6.406q-0.094-0.188-0.25-0.281t-0.375-0.094q-0.188 0-0.344 0.094t-0.25 0.281l-3.125 6.438-7.094 1.094q-0.188 0.031-0.344 0.156t-0.219 0.313q-0.031 0.188 0.016 0.375t0.172 0.313l5.156 4.969-1.156 7.063q-0.031 0.188 0.047 0.375t0.234 0.313q0.094 0.063 0.188 0.094t0.219 0.031q0.063 0 0.141-0.031t0.172-0.063l6.313-3.375 6.375 3.313q0.063 0.031 0.141 0.047t0.172 0.016q0.188 0 0.344-0.094t0.25-0.281q0.063-0.094 0.078-0.234t-0.016-0.234q0-0.031 0-0.063l-1.25-6.938 5.094-5.031q0.156-0.156 0.203-0.344t-0.016-0.375zM11.469 19.063q0.031-0.188-0.016-0.344t-0.172-0.281l-4.406-4.25 6.063-0.906q0.156-0.031 0.297-0.125t0.203-0.25l2.688-5.531 2.75 5.5q0.063 0.156 0.203 0.25t0.297 0.125l6.094 0.844-4.375 4.281q-0.125 0.125-0.172 0.297t-0.016 0.328l1.063 6.031-5.438-2.813q-0.156-0.094-0.328-0.078t-0.297 0.078l-5.438 2.875 1-6.031z',
   home: 'M23.719 16.5q-0.313 0-0.531 0.219t-0.219 0.5v7.063q0 0.219-0.172 0.391t-0.391 0.172h-12.344q-0.25 0-0.422-0.172t-0.172-0.391v-7.063q0-0.281-0.219-0.5t-0.531-0.219q-0.281 0-0.516 0.219t-0.234 0.5v7.063q0.031 0.844 0.625 1.453t1.438 0.609h12.375q0.844 0 1.453-0.609t0.609-1.453v-7.063q0-0.125-0.063-0.266t-0.156-0.234q-0.094-0.125-0.234-0.172t-0.297-0.047zM26.5 14.875l-8.813-8.813q-0.313-0.313-0.688-0.453t-0.781-0.141-0.781 0.141-0.656 0.422l-8.813 8.844q-0.188 0.219-0.188 0.516t0.219 0.484q0.094 0.125 0.234 0.172t0.297 0.047q0.125 0 0.25-0.047t0.25-0.141l8.781-8.781q0.156-0.156 0.406-0.156t0.406 0.156l8.813 8.781q0.219 0.188 0.516 0.188t0.516-0.219q0.188-0.188 0.203-0.484t-0.172-0.516z',
   menu: 'M8.938 18.313q0.875 0 1.484-0.609t0.609-1.453-0.609-1.453-1.484-0.609q-0.844 0-1.453 0.609t-0.609 1.453 0.609 1.453 1.453 0.609zM16.188 18.313q0.875 0 1.484-0.609t0.609-1.453-0.609-1.453-1.484-0.609q-0.844 0-1.453 0.609t-0.609 1.453 0.609 1.453 1.453 0.609zM23.469 18.313q0.844 0 1.453-0.609t0.609-1.453-0.609-1.453-1.453-0.609q-0.875 0-1.484 0.609t-0.609 1.453 0.609 1.453 1.484 0.609z',
-  close:
-    'M17.25 16.156l7.375-7.313q0.281-0.281 0.281-0.641t-0.281-0.641q-0.25-0.25-0.625-0.25t-0.625 0.25l-7.375 7.344-7.313-7.344q-0.25-0.25-0.625-0.25t-0.625 0.25q-0.281 0.25-0.281 0.625t0.281 0.625l7.313 7.344-7.375 7.344q-0.281 0.25-0.281 0.625t0.281 0.625q0.125 0.125 0.281 0.188t0.344 0.063q0.156 0 0.328-0.063t0.297-0.188l7.375-7.344 7.375 7.406q0.125 0.156 0.297 0.219t0.328 0.063q0.188 0 0.344-0.078t0.281-0.203q0.281-0.25 0.281-0.609t-0.281-0.641l-7.375-7.406z',
+  close: ICON_PATH_CLOSE,
 }
 
 export default /*#__PURE__*/ defineSystemComponent({

packages/uni-h5/src/service/api/index.ts

@@ -41,6 +41,7 @@ export * from './network/socket'
 
 export * from './location/getLocation'
 export * from './location/openLocation'
+export * from './location/chooseLocation'
 
 export * from './route/navigateBack'
 export * from './route/navigateTo'

packages/uni-h5/src/service/api/location/chooseLocation/LoctaionPicker.tsx

+import { ref, ExtractPropTypes, reactive, computed, watch } from 'vue'
+import { debounce } from '@dcloudio/uni-shared'
+import {
+  createSvgIconVNode,
+  ICON_PATH_CLOSE,
+  ICON_PATH_CONFIRM,
+} from '@dcloudio/uni-core'
+import {
+  defineSystemComponent,
+  Input,
+  ScrollView,
+} from '@dcloudio/uni-components'
+import { usePreventScroll } from '../../../../helpers/usePreventScroll'
+import { Map } from '../../../../view/components'
+import { getJSONP } from '../../../../helpers/getJSONP'
+import { getLocation } from '../../location/getLocation'
+const ICON_PATH_LOCTAION =
+  'M13.3334375 16 q0.033125 1.1334375 0.783125 1.8834375 q0.75 0.75 1.8834375 0.75 q1.1334375 0 1.8834375 -0.75 q0.75 -0.75 0.75 -1.8834375 q0 -1.1334375 -0.75 -1.8834375 q-0.75 -0.75 -1.8834375 -0.75 q-1.1334375 0 -1.8834375 0.75 q-0.75 0.75 -0.783125 1.8834375 ZM30.9334375 14.9334375 l-1.1334375 0 q-0.5 -5.2 -4.0165625 -8.716875 q-3.516875 -3.5165625 -8.716875 -4.0165625 l0 -1.1334375 q0 -0.4665625 -0.3 -0.7665625 q-0.3 -0.3 -0.7665625 -0.3 q-0.4665625 0 -0.7665625 0.3 q-0.3 0.3 -0.3 0.7665625 l0 1.1334375 q-5.2 0.5 -8.716875 4.0165625 q-3.5165625 3.516875 -4.0165625 8.716875 l-1.1334375 0 q-0.4665625 0 -0.7665625 0.3 q-0.3 0.3 -0.3 0.7665625 q0 0.4665625 0.3 0.7665625 q0.3 0.3 0.7665625 0.3 l1.1334375 0 q0.5 5.2 4.0165625 8.716875 q3.516875 3.5165625 8.716875 4.0165625 l0 1.1334375 q0 0.4665625 0.3 0.7665625 q0.3 0.3 0.7665625 0.3 q0.4665625 0 0.7665625 -0.3 q0.3 -0.3 0.3 -0.7665625 l0 -1.1334375 q5.2 -0.5 8.716875 -4.0165625 q3.5165625 -3.516875 4.0165625 -8.716875 l1.1334375 0 q0.4665625 0 0.7665625 -0.3 q0.3 -0.3 0.3 -0.7665625 q0 -0.4665625 -0.3 -0.7665625 q-0.3 -0.3 -0.7665625 -0.3 ZM17.0665625 27.6665625 l0 -2.0665625 q0 -0.4665625 -0.3 -0.7665625 q-0.3 -0.3 -0.7665625 -0.3 q-0.4665625 0 -0.7665625 0.3 q-0.3 0.3 -0.3 0.7665625 l0 2.0665625 q-4.3 -0.4665625 -7.216875 -3.383125 q-2.916875 -2.916875 -3.3834375 -7.216875 l2.0665625 0 q0.4665625 0 0.7665625 -0.3 q0.3 -0.3 0.3 -0.7665625 q0 -0.4665625 -0.3 -0.7665625 q-0.3 -0.3 -0.7665625 -0.3 l-2.0665625 0 q0.4665625 -4.3 3.3834375 -7.216875 q2.9165625 -2.916875 7.216875 -3.3834375 l0 2.0665625 q0 0.4665625 0.3 0.7665625 q0.3 0.3 0.7665625 0.3 q0.4665625 0 0.7665625 -0.3 q0.3 -0.3 0.3 -0.7665625 l0 -2.0665625 q4.3 0.4665625 7.216875 3.3834375 q2.9165625 2.9165625 3.383125 7.216875 l-2.0665625 0 q-0.4665625 0 -0.7665625 0.3 q-0.3 0.3 -0.3 0.7665625 q0 0.4665625 0.3 0.7665625 q0.3 0.3 0.7665625 0.3 l2.0665625 0 q-0.4665625 4.3 -3.383125 7.216875 q-2.916875 2.9165625 -7.216875 3.383125 Z'
+
+const props = {
+  latitude: {
+    type: Number,
+  },
+  longitude: {
+    type: Number,
+  },
+}
+
+export type Props = ExtractPropTypes<typeof props>
+
+function distance(distance: number): string {
+  if (distance > 100) {
+    return `${
+      distance > 1000 ? (distance / 1000).toFixed(1) + 'k' : distance.toFixed(0)
+    }m | `
+  } else if (distance > 0) {
+    return '100m内 | '
+  } else {
+    return ''
+  }
+}
+interface Point {
+  latitude: number
+  longitude: number
+}
+interface State {
+  latitude: number
+  longitude: number
+  keyword: string
+  searching: boolean
+}
+function useState(props: Props) {
+  const state: State = reactive({
+    latitude: 0,
+    longitude: 0,
+    keyword: '',
+    searching: false,
+  })
+  function updatePosition() {
+    if (props.latitude && props.longitude) {
+      state.latitude = props.latitude
+      state.longitude = props.longitude
+    }
+  }
+  watch([() => props.latitude, () => props.longitude], updatePosition)
+  updatePosition()
+  return state
+}
+
+export interface Poi {
+  name: string
+  address: string
+  distance: number
+  latitude: number
+  longitude: number
+}
+
+function useList(state: State) {
+  const key = __uniConfig.qqMapKey
+  const list: Poi[] = reactive([])
+  const selectedIndexRef = ref(-1)
+  const selectedRef = computed(() => list[selectedIndexRef.value])
+  const listState = reactive({
+    loading: true,
+    pageSize: 15,
+    pageIndex: 1,
+    selectedIndex: selectedIndexRef,
+    selected: selectedRef,
+  })
+  const adcodeRef = ref('')
+  const boundaryRef = computed(() =>
+    adcodeRef.value
+      ? `region(${adcodeRef.value},1,${state.latitude},${state.longitude})`
+      : `nearby(${state.latitude},${state.longitude},5000)`
+  )
+  function pushData(array: any[]) {
+    array.forEach((item) => {
+      list.push({
+        name: item.title,
+        address: item.address,
+        distance: item._distance,
+        latitude: item.location.lat,
+        longitude: item.location.lng,
+      })
+    })
+  }
+  function getList() {
+    listState.loading = true
+    const url = state.searching
+      ? `https://apis.map.qq.com/ws/place/v1/search?output=jsonp&key=${key}&boundary=${boundaryRef.value}&keyword=${state.keyword}&page_size=${listState.pageSize}&page_index=${listState.pageIndex}`
+      : `https://apis.map.qq.com/ws/geocoder/v1/?output=jsonp&key=${key}&location=${state.latitude},${state.longitude}&get_poi=1&poi_options=page_size=${listState.pageSize};page_index=${listState.pageIndex}`
+    // TODO 列表加载失败提示
+    getJSONP(
+      url,
+      {
+        callback: 'callback',
+      },
+      (res: any) => {
+        listState.loading = false
+        if (state.searching && 'data' in res && res.data.length) {
+          pushData(res.data)
+        } else if ('result' in res) {
+          const result = res.result
+          adcodeRef.value = result.ad_info ? result.ad_info.adcode : ''
+          if (result.pois) {
+            pushData(result.pois)
+          }
+        }
+      },
+      () => {
+        listState.loading = false
+      }
+    )
+  }
+  function loadMore() {
+    if (
+      !listState.loading &&
+      list.length === listState.pageSize * listState.pageIndex
+    ) {
+      listState.pageIndex++
+      getList()
+    }
+  }
+  function reset() {
+    listState.selectedIndex = -1
+    listState.pageIndex = 1
+    list.splice(0, list.length)
+  }
+  return {
+    listState,
+    list,
+    loadMore,
+    reset,
+    getList,
+  }
+}
+
+export default /*#__PURE__*/ defineSystemComponent({
+  name: 'LoctaionPicker',
+  props,
+  emits: ['close'],
+  setup(props, { emit }) {
+    usePreventScroll()
+    const state = useState(props)
+    const { list, listState, loadMore, reset, getList } = useList(state)
+    const search = debounce(() => {
+      reset()
+      if (state.keyword) {
+        getList()
+      }
+    }, 1000)
+    watch(
+      () => state.searching,
+      (val) => {
+        reset()
+        if (!val) {
+          getList()
+        }
+      }
+    )
+    function onInput(event: { detail: { value: string } }) {
+      state.keyword = event.detail.value
+      search()
+    }
+
+    function onChoose() {
+      emit('close', Object.assign({}, listState.selected))
+    }
+
+    function onBack() {
+      emit('close')
+    }
+
+    function onRegionChange(event: { detail: { centerLocation: Point } }) {
+      const centerLocation = event.detail.centerLocation
+      if (centerLocation) {
+        // TODO 图钉 icon 动画
+        move(centerLocation)
+      }
+    }
+
+    function moveToLocation() {
+      getLocation({
+        type: 'gcj02',
+        success: move,
+        fail: () => {
+          move({
+            latitude: 39.90960456049752,
+            longitude: 116.3972282409668,
+          })
+        },
+      })
+    }
+
+    function move({ latitude, longitude }: Point) {
+      state.latitude = latitude
+      state.longitude = longitude
+      if (!state.searching) {
+        reset()
+        getList()
+      }
+    }
+
+    if (!state.latitude || !state.longitude) {
+      moveToLocation()
+    }
+
+    return () => {
+      const content = list.map((item, index) => {
+        return (
+          <div
+            key={index}
+            class={{
+              'list-item': true,
+              selected: listState.selectedIndex === index,
+            }}
+            onClick={() => {
+              listState.selectedIndex = index
+              state.latitude = item.latitude
+              state.longitude = item.longitude
+            }}
+          >
+            {createSvgIconVNode(ICON_PATH_CONFIRM, '#007aff', 24)}
+            <div class="list-item-title">{item.name}</div>
+            <div class="list-item-detail">
+              {distance(item.distance)}
+              {item.address}
+            </div>
+          </div>
+        )
+      })
+      if (listState.loading) {
+        content.unshift(
+          <div class="list-loading">
+            <i class="uni-loading" />
+          </div>
+        )
+      }
+      return (
+        <div class="uni-system-choose-location">
+          <Map
+            latitude={state.latitude}
+            longitude={state.longitude}
+            class="map"
+            show-location
+            // @ts-ignore
+            onRegionchange={onRegionChange}
+          >
+            <div class="map-location" />
+            <div class="map-move" onClick={moveToLocation}>
+              {createSvgIconVNode(ICON_PATH_LOCTAION, '#000000', 24)}
+            </div>
+          </Map>
+          <div class="nav">
+            <div class="nav-btn back" onClick={onBack}>
+              {createSvgIconVNode(ICON_PATH_CLOSE, '#ffffff', 26)}
+            </div>
+            <div
+              class={{
+                'nav-btn': true,
+                confirm: true,
+                disable: !listState.selected,
+              }}
+              onClick={onChoose}
+            >
+              {createSvgIconVNode(ICON_PATH_CONFIRM, '#ffffff', 26)}
+            </div>
+          </div>
+          <div class="menu">
+            <div class="search">
+              <Input
+                value={state.keyword}
+                class="search-input"
+                placeholder="搜索地点"
+                // @ts-ignore
+                onFocus={() => (state.searching = true)}
+                onInput={onInput}
+              />
+              {state.searching && (
+                <div
+                  class="search-btn"
+                  onClick={() => {
+                    state.searching = false
+                    state.keyword = ''
+                  }}
+                >
+                  取消
+                </div>
+              )}
+            </div>
+            <ScrollView scroll-y class="list" onScrolltolower={loadMore}>
+              {content}
+            </ScrollView>
+          </div>
+        </div>
+      )
+    }
+  },
+})

packages/uni-h5/src/service/api/location/chooseLocation/index.ts

+import { nextTick, reactive } from 'vue'
+import {
+  API_CHOOSE_LOCATION,
+  API_TYPE_CHOOSE_LOCATION,
+  defineAsyncApi,
+  ChooseLocationProtocol,
+} from '@dcloudio/uni-api'
+import { ensureRoot, createRootApp } from '../../ui/popup/utils'
+import LoctaionPicker, { Props, Poi } from './LoctaionPicker'
+
+let state: Props | null = null
+
+export const chooseLocation = <API_TYPE_CHOOSE_LOCATION>defineAsyncApi(
+  API_CHOOSE_LOCATION,
+  (args, { resolve, reject }) => {
+    if (!state) {
+      state = reactive(args) as Props
+      // 异步执行，避免干扰 getCurrentInstance
+      nextTick(() => {
+        const app = createRootApp(
+          LoctaionPicker,
+          state as Props,
+          (poi: Poi) => {
+            state = null
+            nextTick(() => {
+              app.unmount()
+            })
+            poi ? resolve(poi) : reject('cancel')
+          }
+        )
+        app.mount(ensureRoot('u-a-c'))
+      })
+    } else {
+      // 禁止重复调用
+      reject('cancel')
+    }
+  },
+  ChooseLocationProtocol
+)

packages/uni-h5/src/view/components/map/index.tsx

@@ -297,99 +297,102 @@ function useMap(
     })
     return map
   }
-  useSubscribe((type, data: any = {}) => {
-    switch (type) {
-      case 'getCenterLocation':
-        onMapReady(() => {
-          const center = map.getCenter()
-          callback(data, {
-            latitude: center.getLat(),
-            longitude: center.getLng(),
-            errMsg: `${type}:ok`,
+  try {
+    // TODO 支持在页面外使用
+    useSubscribe((type, data: any = {}) => {
+      switch (type) {
+        case 'getCenterLocation':
+          onMapReady(() => {
+            const center = map.getCenter()
+            callback(data, {
+              latitude: center.getLat(),
+              longitude: center.getLng(),
+              errMsg: `${type}:ok`,
+            })
           })
-        })
-        break
-      case 'moveToLocation':
-        {
-          let latitude = Number(data.latitude)
-          let longitude = Number(data.longitude)
-          if (!latitude || !longitude) {
-            const context: MapLocationContext = contexts[
-              MAP_LOCATION_CONTEXT_ID
-            ] as MapLocationContext
-            if (context) {
-              latitude = context.state.latitude
-              longitude = context.state.longitude
+          break
+        case 'moveToLocation':
+          {
+            let latitude = Number(data.latitude)
+            let longitude = Number(data.longitude)
+            if (!latitude || !longitude) {
+              const context: MapLocationContext = contexts[
+                MAP_LOCATION_CONTEXT_ID
+              ] as MapLocationContext
+              if (context) {
+                latitude = context.state.latitude
+                longitude = context.state.longitude
+              }
             }
-          }
-          if (latitude && longitude) {
-            state.latitude = latitude
-            state.longitude = longitude
-            if (map) {
-              map.setCenter(new maps.LatLng(latitude, longitude))
+            if (latitude && longitude) {
+              state.latitude = latitude
+              state.longitude = longitude
+              if (map) {
+                map.setCenter(new maps.LatLng(latitude, longitude))
+              }
+              onMapReady(() => {
+                callback(data, `${type}:ok`)
+              })
+            } else {
+              callback(data, `${type}:fail`)
             }
-            onMapReady(() => {
-              callback(data, `${type}:ok`)
-            })
-          } else {
-            callback(data, `${type}:fail`)
           }
-        }
-        break
-      case 'translateMarker':
-        onMapReady(() => {
-          const context: MapMarkerContext = contexts[
-            data.markerId
-          ] as MapMarkerContext
-          if (context) {
-            try {
-              context.translate(data)
-            } catch (error) {
-              callback(data, `${type}:fail ${error.message}`)
+          break
+        case 'translateMarker':
+          onMapReady(() => {
+            const context: MapMarkerContext = contexts[
+              data.markerId
+            ] as MapMarkerContext
+            if (context) {
+              try {
+                context.translate(data)
+              } catch (error) {
+                callback(data, `${type}:fail ${error.message}`)
+              }
+              callback(data, `${type}:ok`)
+            } else {
+              callback(data, `${type}:fail not found`)
             }
-            callback(data, `${type}:ok`)
-          } else {
-            callback(data, `${type}:fail not found`)
+          })
+          break
+        case 'includePoints':
+          state.includePoints = getPoints(data.includePoints as Point[])
+          if (isBoundsReady) {
+            updateBounds()
           }
-        })
-        break
-      case 'includePoints':
-        state.includePoints = getPoints(data.includePoints as Point[])
-        if (isBoundsReady) {
-          updateBounds()
-        }
-        onBoundsReady(() => {
-          callback(data, `${type}:ok`)
-        })
-        break
-      case 'getRegion':
-        onBoundsReady(() => {
-          const latLngBounds = map.getBounds()
-          const southwest = latLngBounds.getSouthWest()
-          const northeast = latLngBounds.getNorthEast()
-          callback(data, {
-            southwest: {
-              latitude: southwest.getLat(),
-              longitude: southwest.getLng(),
-            },
-            northeast: {
-              latitude: northeast.getLat(),
-              longitude: northeast.getLng(),
-            },
-            errMsg: `${type}:ok`,
+          onBoundsReady(() => {
+            callback(data, `${type}:ok`)
           })
-        })
-        break
-      case 'getScale':
-        onMapReady(() => {
-          callback(data, {
-            scale: map.getZoom(),
-            errMsg: `${type}:ok`,
+          break
+        case 'getRegion':
+          onBoundsReady(() => {
+            const latLngBounds = map.getBounds()
+            const southwest = latLngBounds.getSouthWest()
+            const northeast = latLngBounds.getNorthEast()
+            callback(data, {
+              southwest: {
+                latitude: southwest.getLat(),
+                longitude: southwest.getLng(),
+              },
+              northeast: {
+                latitude: northeast.getLat(),
+                longitude: northeast.getLng(),
+              },
+              errMsg: `${type}:ok`,
+            })
           })
-        })
-        break
-    }
-  })
+          break
+        case 'getScale':
+          onMapReady(() => {
+            callback(data, {
+              scale: map.getZoom(),
+              errMsg: `${type}:ok`,
+            })
+          })
+          break
+      }
+    })
+  } catch (error) {}
   onMounted(() => {
     loadMaps((result) => {
       maps = result as QQMapsExt

packages/uni-h5/style/api/location-picker.css

+.uni-system-choose-location {
+  display: block;
+  position: fixed;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  background: #f8f8f8;
+  z-index: 999;
+}
+
+.uni-system-choose-location .map {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 300px;
+}
+
+.uni-system-choose-location .map-location {
+  position: absolute;
+  left: 50%;
+  bottom: 50%;
+  width: 32px;
+  height: 52px;
+  margin-left: -16px;
+  cursor: pointer;
+  background-image: url("data:image/png;base64,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");
+  background-size: 100%;
+}
+
+.uni-system-choose-location .map-move {
+  position: absolute;
+  bottom: 50px;
+  right: 10px;
+  width: 40px;
+  height: 40px;
+  box-sizing: border-box;
+  line-height: 40px;
+  background-color: white;
+  border-radius: 50%;
+  pointer-events: auto;
+  cursor: pointer;
+  box-shadow: 0px 0 5px 1px rgba(0, 0, 0, 0.3);
+}
+
+.uni-system-choose-location .map-move>svg {
+  display: block;
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  padding: 8px;
+}
+
+.uni-system-choose-location .nav {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 44px;
+  background-color: transparent;
+  background-image: linear-gradient( to bottom, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0));
+}
+
+.uni-system-choose-location .nav-btn {
+  position: absolute;
+  box-sizing: border-box;
+  top: 0;
+  left: 0;
+  width: 60px;
+  height: 44px;
+  padding: 6px;
+  line-height: 32px;
+  font-size: 26px;
+  color: white;
+  text-align: center;
+  cursor: pointer;
+}
+
+.uni-system-choose-location .nav-btn.confirm {
+  left: auto;
+  right: 0;
+}
+
+.uni-system-choose-location .nav-btn.disable {
+  opacity: 0.4;
+}
+
+.uni-system-choose-location .nav-btn>svg {
+  display: block;
+  width: 100%;
+  height: 100%;
+  /* line-height: inherit; */
+  border-radius: 2px;
+  box-sizing: border-box;
+  padding: 3px;
+}
+
+.uni-system-choose-location .nav-btn.confirm>svg {
+  background-color: #007aff;
+  padding: 5px;
+}
+
+.uni-system-choose-location .menu {
+  position: absolute;
+  top: 300px;
+  left: 0;
+  width: 100%;
+  bottom: 0;
+  background-color: white;
+}
+
+.uni-system-choose-location .search {
+  display: flex;
+  flex-direction: row;
+  height: 50px;
+  padding: 8px;
+  line-height: 34px;
+  box-sizing: border-box;
+  background-color: white;
+}
+
+.uni-system-choose-location .search-input {
+  flex: 1;
+  height: 100%;
+  border-radius: 5px;
+  padding: 0 5px;
+  background: #ebebeb;
+}
+
+.uni-system-choose-location .search-btn {
+  width: 2.8em;
+  color: #007aff;
+  font-size: 17px;
+  text-align: center;
+}
+
+.uni-system-choose-location .list {
+  position: absolute;
+  top: 50px;
+  left: 0;
+  width: 100%;
+  bottom: 0;
+  padding-bottom: 10px;
+  /* background-color: #f6f6f6; */
+}
+
+.uni-system-choose-location .list-loading {
+  display: flex;
+  height: 50px;
+  justify-content: center;
+  align-items: center;
+}
+
+.uni-system-choose-location .list-item {
+  position: relative;
+  padding: 10px;
+  padding-right: 40px;
+  cursor: pointer;
+}
+
+.uni-system-choose-location .list-item>svg {
+  display: none;
+  position: absolute;
+  top: 50%;
+  right: 10px;
+  width: 30px;
+  height: 30px;
+  margin-top: -15px;
+  box-sizing: border-box;
+  padding: 5px;
+}
+
+.uni-system-choose-location .list-item.selected>svg {
+  display: block;
+}
+
+.uni-system-choose-location .list-item:not(:last-child)::after {
+  position: absolute;
+  content: "";
+  height: 1px;
+  left: 10px;
+  bottom: 0;
+  width: 100%;
+  background-color: #d3d3d3;
+}
+
+.uni-system-choose-location .list-item-title {
+  font-size: 14px;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.uni-system-choose-location .list-item-detail {
+  font-size: 12px;
+  color: #808080;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+@media screen and (min-width: 800px) {
+  .uni-system-choose-location .map {
+    top: 0;
+    height: 100%;
+  }
+  .uni-system-choose-location .map-move {
+    bottom: 10px;
+    right: 320px;
+  }
+  .uni-system-choose-location .menu {
+    top: 54px;
+    left: auto;
+    right: 10px;
+    width: 300px;
+    bottom: 10px;
+    max-height: 600px;
+    box-shadow: 0px 0 20px 5px rgba(0, 0, 0, 0.3);
+  }
+}
\ No newline at end of file