Merge pull request #15805 from xiaoyan428820/main

feat: [harmony-hybrid]同层渲染Map组件新增Marker属性支持。
NervJS · May 31, 2024 · e8ddabe · e8ddabe
2 parents 7523fdb + 8d26d39
commit e8ddabe
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 12 deletions.
diff --git a/examples/mini-program-example/src/pages/component/map/map.js b/examples/mini-program-example/src/pages/component/map/map.js
@@ -44,13 +44,13 @@ export default class PageView extends React.Component {
       markers: [
         {
           id: 8888888888,
-          latitude: 39.914887,
-          longitude: 116.403694,
-          title: '北京天安门',
-          iconPath: 'https://img1.baidu.com/it/u=4261206956,1866846027&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=415',
+          latitude: 39.916348,
+          longitude: 116.404999,
+          title: '北京市第二十七中学',
+          iconPath: 'https://img.58cdn.com.cn/git/tcb/mini-img/wx/wanliqiu/map-1.png',
           rotate: 0,
-          width: 20,
-          height: 20,
+          width: 120,
+          height: 120,
           callout: {
             content: '我在天安门!',
             color: '#ffffff',
@@ -81,14 +81,14 @@ export default class PageView extends React.Component {
         },
         {
           id: 666666666,
-          latitude: 38.914887,
-          longitude: 116.403694,
-          title: '北京天安门',
+          latitude: 39.913834,
+          longitude: 116.403427,
+          title: '南池子美术馆',
           zIndex: 999,
-          iconPath: 'https://img1.baidu.com/it/u=4261206956,1866846027&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=415',
+          iconPath: 'https://img.58cdn.com.cn/git/tcb/mini-img/wx/wanliqiu/map-1.png',
           rotate: 0,
-          width: 20,
-          height: 20,
+          width: 120,
+          height: 120,
           callout: {
             content: 'hahhaa天安门!',
             color: '#ffffff',
@@ -699,6 +699,7 @@ export default class PageView extends React.Component {
             showCompass={this.state.showCompass}
             showLocation={this.state.showLocation}
             enableTraffic={this.state.enableTraffic}
+            markers={this.state.markers}
             onTap={this.handleOnTap}
             onMarkerTap={this.handleOnMarkerTap}
             onCalloutTap={this.handleOnCalloutTap}

diff --git a/packages/taro-platform-harmony-hybrid/src/components/components-react/Map/Map.tsx b/packages/taro-platform-harmony-hybrid/src/components/components-react/Map/Map.tsx
@@ -1,5 +1,21 @@
 import React from 'react'
 
+interface marker {
+  latitude: number
+  longitude: number
+  title?: string
+  zIndex?: number // 图标所在层级
+  iconPath?: string // 图标路径，当前仅支持base64图片
+  rotate?: number // 图标旋转角度
+  alpha?: number // 图标透明度，取值范围为0-1
+  width?: number // 图标宽度
+  height?: number // 图标高度
+  anchor?: {
+    x: number // 锚点X坐标，范围0-1
+    y: number // 锚点Y坐标，范围0-1
+  }
+}
+
 interface IProps extends React.HTMLAttributes<HTMLDivElement> {
   latitude: number
   longitude: number
@@ -15,6 +31,7 @@ interface IProps extends React.HTMLAttributes<HTMLDivElement> {
   showScale?: boolean // 显示比例尺
   showLocation?: boolean // 显示当前定位点
   enableTraffic?: boolean // 是否显示路况图层
+  markers?: marker[] // 标记点
   onTap?: (e: any) => void // 点击地图时触发
   onMarkerTap?: (e: any) => void // 点击marker时触发
   onCalloutTap?: (e: any) => void // 点击气泡时触发
@@ -49,6 +66,7 @@ class HosMap extends React.Component<IProps> {
       showScale,
       showLocation,
       enableTraffic,
+      markers,
       onTap,
       onMarkerTap,
       onCalloutTap,
@@ -76,6 +94,7 @@ class HosMap extends React.Component<IProps> {
       scaleControlsEnabled: showScale,
       setMyLocationEnabled: showLocation,
       setTrafficEnabled: enableTraffic,
+      markers,
       onMapClick: onTap,
       onMarkerClick: onMarkerTap,
       onBubbleClick: onCalloutTap,