wip(harmony): 支持地图及相关api

packages/uni-app-harmony/build.json

@@ -31,7 +31,7 @@
         "source": "^@ohos.*"
       },
       {
-        "source": "^@kit.*"
+        "source": "^@hms.*"
       }
     ]
   },

packages/uni-app-harmony/src/service/api/location/chooseLocation/LoctaionPickerPage.tsx

 // @ts-nocheck
-// TODO 优化此处代码
+// TODO 优化此处代码，此页面无对应的css
 import { definePage } from '@dcloudio/uni-app-plus/service/framework/page/define'
 import { createCommentVNode, createElementBlock, openBlock } from 'vue'
+import { once } from '@dcloudio/uni-shared'
 
 const LocationPickerPage = {
   data() {
@@ -11,6 +12,7 @@ const LocationPickerPage = {
       longitude: 0,
       loaded: false,
       channel: void 0,
+      closed: false,
     }
   },
   onLoad(e) {
@@ -20,9 +22,16 @@ const LocationPickerPage = {
     this.loaded = true
     this.channel = this.getOpenerEventChannel()
   },
+  onUnload() {
+    if (this.closed) {
+      return
+    }
+    this.channel.emit('close', {})
+  },
   methods: {
     onClose(e) {
-      this.channel.emit('close', e)
+      this.closed = true
+      this.channel.emit('close', e.detail)
       uni.navigateBack()
     },
   },
@@ -50,4 +59,18 @@ const LocationPickerPage = {
   },
 }
 
-definePage('__uniappchooselocation', LocationPickerPage)
+export const ROUTE_LOCATION_PICKER_PAGE = '__uniappchooselocation'
+
+export const initLocationPickerPageOnce = once(() => {
+  definePage(ROUTE_LOCATION_PICKER_PAGE, LocationPickerPage)
+  __uniRoutes.push({
+    meta: {
+      navigationBar: {
+        style: 'custom',
+      },
+      isNVue: false,
+      route: ROUTE_LOCATION_PICKER_PAGE,
+    },
+    path: '/' + ROUTE_LOCATION_PICKER_PAGE,
+  })
+})

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

@@ -4,15 +4,21 @@ import {
   ChooseLocationProtocol,
   defineAsyncApi,
 } from '@dcloudio/uni-api'
-import './LoctaionPickerPage'
+import {
+  ROUTE_LOCATION_PICKER_PAGE,
+  initLocationPickerPageOnce,
+} from './LoctaionPickerPage'
 
 export const chooseLocation = defineAsyncApi<API_TYPE_CHOOSE_LOCATION>(
   API_CHOOSE_LOCATION,
   (args, { resolve, reject }) => {
+    initLocationPickerPageOnce()
     const { keyword = '', latitude = '', longitude = '' } = args
     uni.navigateTo({
       url:
-        '__uniappchooseLocation?keyword=' +
+        '/' +
+        ROUTE_LOCATION_PICKER_PAGE +
+        '?keyword=' +
         keyword +
         '&latitude=' +
         latitude +

packages/uni-app-harmony/src/service/api/location/getLocation.ts

@@ -9,7 +9,8 @@ import { registerServiceMethod } from '@dcloudio/uni-core'
 import geoLocationManager from '@ohos.geoLocationManager'
 import abilityAccessCtrl from '@ohos.abilityAccessCtrl'
 import type common from '@ohos.app.ability.common'
-import { map, mapCommon } from '@kit.MapKit'
+import mapCommon from '@hms.core.map.mapCommon'
+import map from '@hms.core.map.map'
 
 async function requestPermission(permissions: Permission[]): Promise<boolean> {
   const context = getContext() as common.UIAbilityContext
@@ -48,17 +49,23 @@ export const getLocation = defineAsyncApi<API_TYPE_GET_LOCATION>(
         reject('Permission denied')
         return
       }
-      const requestInfo: geoLocationManager.CurrentLocationRequest = {
-        priority: isHighAccuracy
-          ? geoLocationManager.LocationRequestPriority.ACCURACY
-          : geoLocationManager.LocationRequestPriority.UNSET,
-        scenario: geoLocationManager.LocationRequestScenario.UNSET,
-        maxAccuracy: 0,
-        timeoutMs: highAccuracyExpireTime,
+      // const requestInfo: geoLocationManager.CurrentLocationRequest = {
+      //   priority: isHighAccuracy
+      //     ? geoLocationManager.LocationRequestPriority.ACCURACY
+      //     : geoLocationManager.LocationRequestPriority.UNSET,
+      //   scenario: geoLocationManager.LocationRequestScenario.UNSET,
+      //   maxAccuracy: 0,
+      //   timeoutMs: highAccuracyExpireTime,
+      // }
+      const singleLocationRequest: geoLocationManager.SingleLocationRequest = {
+        locatingPriority: isHighAccuracy
+          ? geoLocationManager.LocatingPriority.PRIORITY_ACCURACY
+          : geoLocationManager.LocatingPriority.PRIORITY_LOCATING_SPEED,
+        locatingTimeoutMs: highAccuracyExpireTime || 1000,
       }
       try {
         geoLocationManager.getCurrentLocation(
-          requestInfo,
+          singleLocationRequest,
           (err: Error, location: geoLocationManager.Location): void => {
             if (err) {
               reject(err.message)

packages/uni-app-harmony/src/service/api/location/locationChange.ts

@@ -20,7 +20,8 @@ import {
 import geoLocationManager from '@ohos.geoLocationManager'
 import abilityAccessCtrl from '@ohos.abilityAccessCtrl'
 import type common from '@ohos.app.ability.common'
-import { map, mapCommon } from '@kit.MapKit'
+import mapCommon from '@hms.core.map.mapCommon'
+import map from '@hms.core.map.map'
 
 async function requestPermission(permissions: Permission[]): Promise<boolean> {
   const context = getContext() as common.UIAbilityContext

packages/uni-app-harmony/src/service/api/location/openLocation/LocationViewPage.tsx

 // @ts-nocheck
-// TODO 优化此处代码
+// TODO 优化此处代码，此页面无对应的css
 import { definePage } from '@dcloudio/uni-app-plus/service/framework/page/define'
 import { createCommentVNode, createElementBlock, openBlock } from 'vue'
+import { once } from '@dcloudio/uni-shared'
 
-const LocationPickerPage = {
+const LocationViewPage = {
   data() {
     return {
       latitude: 0,
@@ -16,12 +17,7 @@ const LocationPickerPage = {
     this.longitude = e.longitude
     this.loaded = true
   },
-  methods: {
-    onClose(e) {
-      this.channel.emit('close', e)
-      uni.navigateBack()
-    },
-  },
+  methods: {},
   render: function (_ctx, _cache, $props, $setup, $data, $options) {
     return $data.loaded
       ? (openBlock(),
@@ -41,4 +37,18 @@ const LocationPickerPage = {
   },
 }
 
-definePage('__uniappopenlocation', LocationPickerPage)
+export const ROUTE_LOCATION_VIEW_PAGE = '__uniappopenlocation'
+
+export const initLocationViewPageOnce = once(() => {
+  definePage(ROUTE_LOCATION_VIEW_PAGE, LocationViewPage)
+  __uniRoutes.push({
+    meta: {
+      navigationBar: {
+        style: 'custom',
+      },
+      isNVue: false,
+      route: ROUTE_LOCATION_VIEW_PAGE,
+    },
+    path: '/' + ROUTE_LOCATION_VIEW_PAGE,
+  })
+})

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

@@ -5,15 +5,24 @@ import {
   OpenLocationProtocol,
   defineAsyncApi,
 } from '@dcloudio/uni-api'
-import './LocationViewPage'
+import {
+  ROUTE_LOCATION_VIEW_PAGE,
+  initLocationViewPageOnce,
+} from './LocationViewPage'
 
 export const openLocation = defineAsyncApi<API_TYPE_OPEN_LOCATION>(
   API_OPEN_LOCATION,
   (args, { resolve, reject }) => {
+    initLocationViewPageOnce()
     const { latitude = '', longitude = '' } = args
     uni.navigateTo({
       url:
-        '__uniappopenlocation?latitude=' + latitude + '&longitude=' + longitude,
+        '/' +
+        ROUTE_LOCATION_VIEW_PAGE +
+        '?latitude=' +
+        latitude +
+        '&longitude=' +
+        longitude,
       success: (res) => {
         resolve()
       },

packages/uni-app-harmony/src/view/components/map/LocationView.tsx

-import { type ExtractPropTypes, reactive, watch } from 'vue'
+import { type ExtractPropTypes, reactive, ref, watch } from 'vue'
 import { ICON_PATH_BACK, createSvgIconVNode } from '@dcloudio/uni-core'
-import { defineSystemComponent } from '@dcloudio/uni-components'
+import {
+  type EmitEvent,
+  defineSystemComponent,
+  useCustomEvent,
+} from '@dcloudio/uni-components'
 import {
   ICON_PATH_LOCTAION,
   ICON_PATH_ORIGIN,
@@ -84,10 +88,13 @@ export default /*#__PURE__*/ defineSystemComponent({
   props,
   emits: ['close'],
   setup(props, { emit }) {
+    const rootRef = ref<HTMLElement | null>(null)
+    const trigger = useCustomEvent<EmitEvent<typeof emit>>(rootRef, emit)
     const state = useState(props)
 
     getLocation({
       type: 'gcj02',
+      isHighAccuracy: true,
     }).then(({ latitude, longitude }) => {
       state.location.latitude = latitude
       state.location.longitude = longitude
@@ -133,8 +140,9 @@ export default /*#__PURE__*/ defineSystemComponent({
       window.open(url)
     }
 
-    function back() {
-      emit('close')
+    function back(e) {
+      const event = new CustomEvent<any>('close', {} as any)
+      trigger('close', event, event.detail)
     }
 
     function setCenter({ latitude, longitude }: Point) {
@@ -144,7 +152,7 @@ export default /*#__PURE__*/ defineSystemComponent({
 
     return () => {
       return (
-        <div class="uni-system-open-location">
+        <div class="uni-system-open-location" ref={rootRef}>
           <Map
             latitude={state.center.latitude}
             longitude={state.center.longitude}

packages/uni-app-harmony/src/view/components/map/LoctaionPicker.tsx

@@ -10,9 +10,11 @@ import {
   useI18n,
 } from '@dcloudio/uni-core'
 import {
+  type EmitEvent,
   Input,
   ScrollView,
   defineSystemComponent,
+  useCustomEvent,
 } from '@dcloudio/uni-components'
 import {
   ICON_PATH_LOCTAION,
@@ -239,6 +241,8 @@ export default /*#__PURE__*/ defineSystemComponent({
   props,
   emits: ['close'],
   setup(props, { emit }) {
+    const rootRef = ref<HTMLElement | null>(null)
+    const trigger = useCustomEvent<EmitEvent<typeof emit>>(rootRef, emit)
     initI18nChooseLocationMsgsOnce()
     const { t } = useI18n()
     const state = useState(props)
@@ -267,12 +271,18 @@ export default /*#__PURE__*/ defineSystemComponent({
       search()
     }
 
-    function onChoose() {
-      emit('close', extend({}, listState.selected))
+    function onChoose(e) {
+      const event = new CustomEvent<any>('close', {
+        detail: extend({}, listState.selected),
+      })
+      trigger('close', event, event.detail)
     }
 
-    function onBack() {
-      emit('close')
+    function onBack(e) {
+      const event = new CustomEvent<any>('close', {
+        detail: {},
+      })
+      trigger('close', event, event.detail)
     }
 
     function onRegionChange(event: { detail: { centerLocation: Point } }) {
@@ -286,13 +296,12 @@ export default /*#__PURE__*/ defineSystemComponent({
     function moveToLocation() {
       getLocation({
         type: 'gcj02',
-        success: move,
-        fail: () => {
-          // move({
-          //   latitude: 0,
-          //   longitude: 0,
-          // })
-        },
+        isHighAccuracy: true,
+      }).then(({ latitude, longitude }) => {
+        move({
+          latitude,
+          longitude,
+        })
       })
     }
 
@@ -312,7 +321,7 @@ export default /*#__PURE__*/ defineSystemComponent({
     return () => {
       const content = list.map((item, index) => {
         return (
-          <uni-location-picker
+          <div
             key={index}
             class={{
               'list-item': true,
@@ -330,7 +339,7 @@ export default /*#__PURE__*/ defineSystemComponent({
               {distance(item.distance)}
               {item.address}
             </div>
-          </uni-location-picker>
+          </div>
         )
       })
       if (listState.loading) {
@@ -341,7 +350,7 @@ export default /*#__PURE__*/ defineSystemComponent({
         )
       }
       return (
-        <div class="uni-system-choose-location">
+        <div class="uni-system-choose-location" ref={rootRef}>
           <Map
             latitude={state.latitude}
             longitude={state.longitude}

packages/uni-app-harmony/src/view/components/map/MapLocation.tsx

@@ -54,6 +54,7 @@ export default /*#__PURE__*/ defineSystemComponent({
       function updateLocation() {
         getLocation({
           type: 'gcj02',
+          isHighAccuracy: true,
         })
           .then((res: Location) => {
             state.latitude = res.latitude

packages/uni-app-harmony/src/view/framework/dom/components/UniLocationPicker.ts

 import type { UniNodeJSON } from '@dcloudio/uni-shared'
-import '../../../../../style/map.css'
 import LocationPicker from '../../../components/map/LoctaionPicker'
+import '../../../../../style/map.css'
+import '../../../../../style/api/location-picker.css'
 
 import { UniComponent } from '@dcloudio/uni-app-plus/view/framework/dom/components/UniComponent'
 

packages/uni-app-harmony/src/view/framework/dom/components/UniLocationView.ts

 import type { UniNodeJSON } from '@dcloudio/uni-shared'
-import '../../../../../style/map.css'
 import LocationView from '../../../components/map/LocationView'
+import '../../../../../style/map.css'
+import '../../../../../style/api/location-view.css'
 
 import { UniComponent } from '@dcloudio/uni-app-plus/view/framework/dom/components/UniComponent'
 

packages/uni-app-harmony/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-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: calc(44px + var(--status-bar-height));
+  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: var(--status-bar-height);
+  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 {
+  margin-left: 5px;
+  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

packages/uni-app-harmony/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 .map {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  bottom: 80px;
+  height: auto;
+}
+
+.uni-system-open-location .info {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 80px;
+  background-color: white;
+  padding: 15px;
+  box-sizing: border-box;
+  line-height: 1.5;
+}
+
+.uni-system-open-location .info>.name {
+  font-size: 17px;
+  color: #111111;
+}
+
+.uni-system-open-location .info>.address {
+  font-size: 14px;
+  color: #666666;
+}
+
+.uni-system-open-location .info>.nav {
+  position: absolute;
+  top: 50%;
+  right: 15px;
+  width: 50px;
+  height: 50px;
+  border-radius: 50%;
+  margin-top: -25px;
+  background-color: #007aff;
+}
+
+.uni-system-open-location .info>.nav>svg {
+  display: block;
+  width: 100%;
+  height: 100%;
+  padding: 10px;
+  box-sizing: border-box;
+}
+
+.uni-system-open-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-open-location .map-move>svg {
+  display: block;
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  padding: 8px;
+}
+
+.uni-system-open-location .nav-btn-back {
+  position: absolute;
+  box-sizing: border-box;
+  top: var(--status-bar-height);
+  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