marker.tsx
2.64 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
import * as React from "react";
import { ImageSourcePropType, NativeSyntheticEvent, requireNativeComponent, View, ViewStyle } from "react-native";
// @ts-ignore
import resolveAssetSource from "react-native/Libraries/Image/resolveAssetSource";
import Component from "./component";
import { LatLng, Point } from "./types";
export interface MarkerProps {
/**
* 坐标
*/
position: LatLng;
/**
* 图标
*/
icon?: ImageSourcePropType;
/**
* 透明度 [0, 1]
*
* @platform android
*/
opacity?: number;
/**
* 是否可拖拽
*/
draggable?: boolean;
/**
* 是否平贴地图
*
* @platform android
*/
flat?: boolean;
/**
* 层级
*/
zIndex?: number;
/**
* 覆盖物锚点比例
*
* @link http://a.amap.com/lbs/static/unzip/Android_Map_Doc/3D/com/amap/api/maps/model/Marker.html#setAnchor-float-float-
* @platform android
*/
anchor?: Point;
/**
* 覆盖物偏移位置
*
* @link http://a.amap.com/lbs/static/unzip/iOS_Map_Doc/AMap_iOS_API_Doc_3D/interface_m_a_annotation_view.html#a78f23c1e6a6d92faf12a00877ac278a7
* @platform ios
*/
centerOffset?: Point;
/**
* 自定义 View
*/
children?: React.ReactNode;
/**
* 点击事件
*/
onPress?: () => void;
/**
* 拖放开始事件
*/
onDragStart?: () => void;
/**
* 拖放进行事件，类似于 mousemove，在结束之前会不断调用
*/
onDrag?: () => void;
/**
* 拖放结束事件
*/
onDragEnd?: (event: NativeSyntheticEvent<LatLng>) => void;
}
export default class extends Component<MarkerProps> {
name = name;
/**
* 触发自定义 view 更新
*
* 通常来说，不需要主动调用该方法，对于 android，如果自定义 view 存在异步更新，
* 例如，包含一个引用了网络图片的 <Image />，则需要在 view 更新后主动调用该方法触发
* icon 更新。
*/
update = () => {
setTimeout(() => this.invoke("update"), 0);
};
componentDidUpdate() {
if (this.props.children) {
this.update();
}
}
render() {
const props = { ...this.props };
// @ts-ignore android 不能用 position 作为属性，会发生冲突
props.latLng = props.position;
// @ts-ignore
delete props.position;
if (props.children) {
props.children = (
<View style={style} onLayout={this.update}>
{props.children}
</View>
);
}
return <NativeMarker {...props} icon={resolveAssetSource(props.icon)} />;
}
}
const name = "AMapMarker";
const style: ViewStyle = { position: "absolute", zIndex: -1 };
const NativeMarker = requireNativeComponent<MarkerProps>(name);