Merge pull request NervJS#15708 from xiaoyan428820/main

[harmony-hybrid]新增Map同层渲染及配套MapContext类，新增openLocation/choooseLocatio…
handsomeliuyang · May 11, 2024 · 18ceae3 · 18ceae3
2 parents 9be615c + 5eafb3a
commit 18ceae3
Show file tree

Hide file tree

Showing 17 changed files with 502 additions and 306 deletions.
diff --git a/...es/mini-program-example/src/pages/api/basics/miniProgram/applicationLevelEvents/index.tsx b/...es/mini-program-example/src/pages/api/basics/miniProgram/applicationLevelEvents/index.tsx
@@ -44,14 +44,15 @@ export default class Index extends React.Component {
         id: 'onPageNotFound',
         func: (apiIndex) => {
           TestConsole.consoleTest('Taro.onPageNotFound')
-          Taro.navigateTo({
-            url: 'pages/api/index/11',
-          })
           Taro.onPageNotFound((res) => {
             TestConsole.consoleOnCallback.call(this, res, 'onPageNotFound', apiIndex)
-            Taro.navigateTo({
-              url: 'pages/api/index/index',
-            })
+          })
+          Taro.navigateTo({
+            url: 'pages/api/index/11',
+          }).then((res) => {
+            TestConsole.consoleNormal.call(this, res)
+          }).catch((error) => {
+            TestConsole.consoleNormal.call(this, error)
           })
         },
       },

diff --git a/examples/mini-program-example/src/pages/api/index/index.tsx b/examples/mini-program-example/src/pages/api/index/index.tsx
@@ -76,8 +76,8 @@ export default class Index extends React.Component {
         id: 'basics',
         name: '基础',
         open: false,
-        pages: ['basics', 'system', 'update', 'miniProgram', 'debug', 'performance', 'encryption'],
-        target: ['basics', 'system', 'update', 'miniProgram', 'debug', 'performance', 'encryption'],
+        pages: ['basics', 'system', 'update', 'miniProgram', 'nativeDebug', 'performance', 'encryption'],
+        target: ['basics', 'system', 'update', 'miniProgram', 'nativeDebug', 'performance', 'encryption'],
       },
       {
         id: 'routing',

diff --git a/examples/mini-program-example/src/pages/api/index/module.js b/examples/mini-program-example/src/pages/api/index/module.js
@@ -3,7 +3,7 @@ export const apiName = {
   system: '系统',
   update: '更新',
   miniProgram: '小程序',
-  debug: '调试',
+  nativeDebug: '调试',
   performance: '性能',
   encryption: '加密',
   interaction: '交互',

diff --git a/examples/mini-program-example/src/pages/api/media/map/index.scss b/examples/mini-program-example/src/pages/api/media/map/index.scss
@@ -1,6 +1,15 @@
 @import "@/styles/variables.scss";
 
 .test-style {
-    color: #f5f5f5;
-    background-color: $color-success;
+  color: #f5f5f5;
+  background-color: $color-success;
 }
+
+.taro-map-container {
+  display: inline-block;
+  position: relative;
+  left: 0;
+  top: 0;
+  width: 100%;
+  object-position: inherit;
+}
diff --git a/examples/mini-program-example/src/pages/api/media/map/index.tsx b/examples/mini-program-example/src/pages/api/media/map/index.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import Taro from '@tarojs/taro'
-import { View, Text, Map, Button } from '@tarojs/components'
+import { View, Map, Button, HosMap } from '@tarojs/components'
 import ButtonList from '@/components/buttonList'
 import './index.scss'
 import { TestConsole } from '@/util/util'
@@ -73,16 +73,29 @@ export default class Index extends React.Component {
             }
           },
         },
-
         {
           id: 'moveToLocation',
           func: (apiIndex) => {
-            TestConsole.consoleTest('moveToLocation')
-            mapContext.moveToLocation()
-            TestConsole.consoleNormal('moveToLocation暂不支持')
+            if (mapContext) {
+              TestConsole.consoleTest('moveToLocation')
+              mapContext.moveToLocation({
+                latitude: 39.90374,
+                longitude: 116.397827,
+                success: (res) => {
+                  TestConsole.consoleSuccess.call(this, res, apiIndex)
+                },
+                fail: (res) => {
+                  TestConsole.consoleFail.call(this, res, apiIndex)
+                },
+                complete: (res) => {
+                  TestConsole.consoleComplete.call(this, res, apiIndex)
+                }
+              })
+            } else {
+              TestConsole.consoleTest('------mapContext未创建------')
+            }
           },
         },
-
         {
           id: 'translateMarker',
           inputData: {
@@ -123,9 +136,9 @@ export default class Index extends React.Component {
           inputData: {
             markerId: 1,
             path: [
-              { latitude: 39.916263, longitude: 116.403119},
-              { latitude: 39.951671, longitude: 116.488781},
-              { latitude: 39.968041, longitude: 116.534775},
+              { latitude: 39.916263, longitude: 116.403119 },
+              { latitude: 39.951671, longitude: 116.488781 },
+              { latitude: 39.968041, longitude: 116.534775 },
             ],
             duration: 5000,
             autoRotate: true,
@@ -663,9 +676,9 @@ export default class Index extends React.Component {
     )
   }
 
-  render() {
+  render () {
     const { list } = this.state
-    function onTaps(e) {
+    function onTaps (e) {
       console.log(e.detail)
     }
     const markers = [
@@ -712,9 +725,24 @@ export default class Index extends React.Component {
     ]
     return (
       <View className='api-page'>
+        <HosMap
+          className='taro-map-container'
+          style={{ height: '400px' }}
+          id='Map'
+          latitude={39.914889}
+          longitude={116.403696}
+          scale={16}
+          minScale={3}
+          maxScale={20}
+          enableZoom={true}
+          enableScroll={true}
+          enableRotate={true}
+          showScale={true}
+          showCompass={true}
+        ></HosMap>
         {this.state.isShow && (
           <Map
-            id='Map'
+            id='H5Map'
             latitude={this.state.latitude}
             longitude={this.state.longitude}
             scale={this.state.scale}
@@ -790,7 +818,7 @@ export default class Index extends React.Component {
             enable3D //是否开启3D
             onTap={onTaps}
             height={'400px'}
-            width={'400px'}
+            width={'400px'}
           ></Map>
         )}
         latitude:<input onBlur={this.handleInputChangeLatitude}></input>

diff --git a/examples/mini-program-example/src/pages/component/map/map.js b/examples/mini-program-example/src/pages/component/map/map.js
@@ -2,7 +2,7 @@ import './map.scss'
 import React from 'react'
 
 import Taro from '@tarojs/taro'
-import { View, Text, Map, Button } from '@tarojs/components'
+import { View, Text, Map, Button, HosMap } from '@tarojs/components'
 
 import Header from '../../../components/head/head'
 
@@ -27,17 +27,19 @@ export default class PageView extends React.Component {
       build: true,
       skew: 0,
       rotate: 0,
-      showScale: false,
+      showScale: true,
+      showLocation: true,
       subkey: '',
       layerStyle: 1,
       enableZoom: true,
       enableScroll: true,
+      enableRotate: true,
       enableSatellite: false,
       showCompass: false,
       enable3D: false,
       enableOverlooking: false,
       enableAutoMaxOverlooking: false,
-      enableTraffic: false,
+      enableTraffic: true,
       Traffic: false,
       markers: [
         {
@@ -624,6 +626,51 @@ export default class PageView extends React.Component {
     )
   }
 
+  handleOnTap = (e) => {
+    // 处理点击地图事件的逻辑
+    console.log('Web Map handleOnTap: ', e);
+  }
+
+  handleOnMarkerTap = (e) => {
+    // 处理点击marker事件的逻辑
+    console.log('Web Map handleOnMarkerTap: ', e);
+  }
+
+  handleOnCalloutTap = (e) => {
+    // 处理点击气泡事件的逻辑
+    console.log('Web Map handleOnCalloutTap: ', e);
+  }
+
+  handleOnUpdated = (e) => {
+    // 处理地图加载完成事件的逻辑
+    console.log('Web Map handleOnUpdated: ', e);
+  }
+
+  handleOnRegionChange = (e) => {
+    // 处理视野变化事件的逻辑
+    console.log('Web Map handleOnRegionChange: ', e);
+  }
+
+  handleOnPoiTap = (e) => {
+    // 处理点击POI事件的逻辑
+    console.log('Web Map handleOnPoiTap: ', e);
+  }
+
+  handleOnPolylineTap = (e) => {
+    // 处理点击折线事件的逻辑
+    console.log('Web Map handleOnPolylineTap: ', e);
+  }
+
+  handleOnError = (e) => {
+    // 处理地图加载失败事件的逻辑
+    console.log('Web Map handleOnError: ', e);
+  }
+
+  handleOnAnchorPointTap = (e) => {
+    // 处理点击定位按钮事件的逻辑
+    console.log('Web Map handleOnAnchorPointTap: ', e);
+  }
+
   render() {
     function onTaps(e) {
       console.log(e.detail)
@@ -635,6 +682,34 @@ export default class PageView extends React.Component {
         <ComponentState platform='H5' rate='60'>
           {' '}
         </ComponentState>
+        {this.state.isShow && (
+          <HosMap
+            className='taro-map-container'
+            style={{ height: '400px' }}
+            id='myHosMap'
+            longitude={this.state.longitude}
+            latitude={this.state.latitude}
+            scale={this.state.scale}
+            minScale={this.state.minScale}
+            maxScale={this.state.maxScale}
+            enableZoom={this.state.enableZoom}
+            enableScroll={this.state.enableScroll}
+            enableRotate={this.state.enableRotate}
+            showScale={this.state.showScale}
+            showCompass={this.state.showCompass}
+            showLocation={this.state.showLocation}
+            enableTraffic={this.state.enableTraffic}
+            onTap={this.handleOnTap}
+            onMarkerTap={this.handleOnMarkerTap}
+            onCalloutTap={this.handleOnCalloutTap}
+            onUpdated={this.handleOnUpdated}
+            onRegionChange={this.handleOnRegionChange}
+            onPoiTap={this.handleOnPoiTap}
+            onPolylineTap={this.handleOnPolylineTap}
+            onError={this.handleOnError}
+            onAnchorPointTap={this.handleOnAnchorPointTap}
+          ></HosMap>
+        )}
         {this.state.isShow && (
           <Map
             longitude={this.state.longitude}
@@ -663,7 +738,7 @@ export default class PageView extends React.Component {
             enableTraffic={this.state.enableTraffic}
             onTap={onTaps}
             height={'400px'}
-            width={'400px'}
+            width={'400px'}
           ></Map>
         )}
         latitude:<input onBlur={this.handleInputChangeLatitude}></input>

diff --git a/examples/mini-program-example/src/pages/component/map/map.scss b/examples/mini-program-example/src/pages/component/map/map.scss
@@ -16,3 +16,12 @@
 .page-section-title {
   text-align: center;
 }
+
+.taro-map-container {
+  display: inline-block;
+  position: relative;
+  left: 0;
+  top: 0;
+  width: 100%;
+  object-position: inherit;
+}
diff --git a/packages/taro-platform-harmony-hybrid/src/api/apis/NativeApi.ts b/packages/taro-platform-harmony-hybrid/src/api/apis/NativeApi.ts
@@ -9,6 +9,18 @@ const asyncAndNotRelease = window.MethodChannel && window.MethodChannel.jsBridge
 
 // export let judgeUseAxios = false
 class NativeApi {
+  // @ts-ignore
+  @(syncAndRelease)
+  openLocation (options: any): any {
+    return options
+  }
+
+  // @ts-ignore
+  @(syncAndRelease)
+  chooseLocation (options: any): any {
+    return options
+  }
+
   // @ts-ignore
   @(syncAndRelease)
   getWindowInfo (): any {