feat(h5): openLocation

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

@@ -10,4 +10,5 @@ export const API_STYLES = {
     `${BASE_COMPONENTS_STYLE_PATH}/movable-area.css`,
     `${BASE_COMPONENTS_STYLE_PATH}/movable-view.css`,
   ],
+  openLocation: [`${H5_API_STYLE_PATH}/location-view.css`],
 }

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

@@ -32,6 +32,8 @@ export 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'
 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 function createSvgIconVNode(
   path: string,

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

@@ -188,6 +188,7 @@ const ICON_PATH_SUCCESS_NO_CIRCLE = "M1.952 18.080q-0.32-0.352-0.416-0.88t0.128-
 const ICON_PATH_SUCCESS = "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.176zM24.832 11.328l-11.264 11.104q-0.032 0.032-0.112 0.032t-0.112-0.032l-5.216-5.376q-0.096-0.128 0-0.288l0.704-0.96q0.032-0.064 0.112-0.064t0.112 0.032l4.256 3.264q0.064 0.032 0.144 0.032t0.112-0.032l10.336-8.608q0.064-0.064 0.144-0.064t0.112 0.064l0.672 0.672q0.128 0.128 0 0.224z";
 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";
 function createSvgIconVNode(path, color = "#000", size = 27) {
   return vue.createVNode("svg", {
     width: size,
@@ -9593,7 +9594,6 @@ function usePageHeadTransparent(headRef, {
 }) {
   vue.computed(() => hexToRgba(backgroundColor));
 }
-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_PATHS = {
   none: "",
   forward: "M11 7.844q-0.25-0.219-0.25-0.578t0.25-0.578q0.219-0.25 0.563-0.25t0.563 0.25l9.656 9.125q0.125 0.125 0.188 0.297t0.063 0.328q0 0.188-0.063 0.359t-0.188 0.297l-9.656 9.125q-0.219 0.25-0.563 0.25t-0.563-0.25q-0.25-0.219-0.25-0.578t0.25-0.609l9.063-8.594-9.063-8.594z",

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

@@ -7,6 +7,7 @@ import {
   updateStyle,
   createSvgIconVNode,
   ICON_PATH_SEARCH,
+  ICON_PATH_BACK,
 } from '@dcloudio/uni-core'
 import { usePageMeta } from '../../setup/provide'
 import {
@@ -14,9 +15,6 @@ import {
   usePageHeadTransparentBackgroundColor,
 } from './transparent'
 
-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_PATHS = {
   none: '',
   forward:

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

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

packages/uni-h5/src/service/api/location/openLocation/LocationView.tsx

+import {
+  defineComponent,
+  Ref,
+  ref,
+  ExtractPropTypes,
+  reactive,
+  computed,
+} from 'vue'
+import { createSvgIconVNode, ICON_PATH_BACK } from '@dcloudio/uni-core'
+
+const props = {
+  latitude: {
+    type: Number,
+  },
+  longitude: {
+    type: Number,
+  },
+  scale: {
+    type: Number,
+    default: 18,
+  },
+  name: {
+    type: String,
+    default: '',
+  },
+  address: {
+    type: String,
+    default: '',
+  },
+}
+
+export type Props = ExtractPropTypes<typeof props>
+
+export default /*#__PURE__*/ defineComponent({
+  name: 'LocationView',
+  props,
+  emits: ['close'],
+  setup(props, { emit }) {
+    const mapRef: Ref<HTMLIFrameElement | null> = ref(null)
+    const key = __uniConfig.qqMapKey
+    const referer = 'uniapp'
+    const poimarkerSrc = 'https://apis.map.qq.com/tools/poimarker'
+    const src = computed(() => {
+      const { latitude, longitude, name, address } = props
+      return latitude && longitude
+        ? `${poimarkerSrc}?type=0&marker=coord:${latitude},${longitude};title:${name};addr:${address};&key=${key}&referer=${referer}`
+        : ''
+    })
+    const state = reactive({
+      src,
+      isPoimarkerSrc: true,
+    })
+
+    function check() {
+      const map = mapRef.value as HTMLIFrameElement
+      if (map.src.indexOf(poimarkerSrc) === 0) {
+        state.isPoimarkerSrc = true
+      } else {
+        state.isPoimarkerSrc = false
+      }
+    }
+
+    function nav() {
+      const map = mapRef.value as HTMLIFrameElement
+      const url = `https://map.qq.com/nav/drive#routes/page?transport=2&epointy=${
+        props.latitude
+      }&epointx=${props.longitude}&eword=${encodeURIComponent(
+        props.name || '目的地'
+      )}&referer=${referer}`
+      map.src = url
+    }
+
+    function back() {
+      const map = mapRef.value as HTMLIFrameElement
+      if (map.src.indexOf(poimarkerSrc) !== 0) {
+        map.src = state.src
+      } else {
+        emit('close')
+      }
+      check()
+    }
+
+    return () => {
+      return (
+        <div class="uni-system-open-location">
+          <div
+            class={{
+              'map-content': true,
+              'fix-position': state.isPoimarkerSrc,
+            }}
+          >
+            <iframe
+              ref={mapRef}
+              src={state.src}
+              allow="geolocation"
+              sandbox="allow-scripts allow-same-origin allow-forms allow-top-navigation allow-modals allow-popups"
+              frameborder="0"
+              onLoad={check}
+            />
+            {/* <!-- 去这里 --> */}
+            {state.isPoimarkerSrc && <div class="actTonav" onClick={nav} />}
+          </div>
+          <div class="nav-btn-back" onClick={back}>
+            {createSvgIconVNode(ICON_PATH_BACK, '#ffffff', 26)}
+          </div>
+        </div>
+      )
+    }
+  },
+})

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

+import { extend } from '@vue/shared'
+import { nextTick, reactive } from 'vue'
+import {
+  API_OPEN_LOCATION,
+  API_TYPE_OPEN_LOCATION,
+  defineAsyncApi,
+  OpenLocationProtocol,
+  OpenLocationOptions,
+} from '@dcloudio/uni-api'
+import { ensureRoot, createRootApp } from '../../ui/popup/utils'
+import LocationView, { Props } from './LocationView'
+
+let state: Props | null = null
+
+export const openLocation = <API_TYPE_OPEN_LOCATION>defineAsyncApi(
+  API_OPEN_LOCATION,
+  (args, { resolve }) => {
+    if (!state) {
+      state = reactive(args) as Props
+      // 异步执行，避免干扰 getCurrentInstance
+      nextTick(() => {
+        const app = createRootApp(LocationView, state as Props, () => {
+          state = null
+          nextTick(() => {
+            app.unmount()
+          })
+        })
+        app.mount(ensureRoot('u-a-o'))
+      })
+    } else {
+      extend(state, args)
+    }
+    resolve()
+  },
+  OpenLocationProtocol,
+  OpenLocationOptions
+)

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

+.uni-system-open-location {
+  display: block;
+  position: fixed;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  background: #f8f8f8;
+  z-index: 999;
+}
+
+.uni-system-open-location .nav-btn-back {
+  position: absolute;
+  box-sizing: border-box;
+  top: 0;
+  left: 0;
+  width: 44px;
+  height: 44px;
+  padding: 6px;
+  cursor: pointer;
+}
+
+.uni-system-open-location .nav-btn-back>svg {
+  display: block;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  background-color: rgba(0, 0, 0, 0.5);
+  padding: 3px;
+  box-sizing: border-box;
+}
+
+.uni-system-open-location .map-content {
+  position: absolute;
+  left: 0;
+  top: 0px;
+  width: 100%;
+  bottom: 0;
+  overflow: hidden;
+}
+
+.uni-system-open-location .map-content.fix-position {
+  top: -74px;
+  bottom: -44px;
+}
+
+.uni-system-open-location .map-content>iframe {
+  width: 100%;
+  height: 100%;
+  border: none;
+}
+
+.uni-system-open-location .actTonav {
+  position: absolute;
+  right: 16px;
+  bottom: 56px;
+  width: 60px;
+  height: 60px;
+  border-radius: 60px;
+}
\ No newline at end of file