diff --git a/examples/mini-program-example/src/pages/component/map/map.js b/examples/mini-program-example/src/pages/component/map/map.js index 003ee132945a..ebdbec4f4444 100644 --- 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 index 6028b342fd8a..6d42d65f38aa 100644 --- 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 { latitude: number longitude: number @@ -15,6 +31,7 @@ interface IProps extends React.HTMLAttributes { 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 { showScale, showLocation, enableTraffic, + markers, onTap, onMarkerTap, onCalloutTap, @@ -76,6 +94,7 @@ class HosMap extends React.Component { scaleControlsEnabled: showScale, setMyLocationEnabled: showLocation, setTrafficEnabled: enableTraffic, + markers, onMapClick: onTap, onMarkerClick: onMarkerTap, onBubbleClick: onCalloutTap,