/
Marker.js
executable file
·207 lines (175 loc) · 4.07 KB
/
Marker.js
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
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
// @flow
import React from 'react'
import PropTypes from 'prop-types'
import { Platform, requireNativeComponent, StyleSheet, ViewPropTypes, View } from 'react-native'
import { LatLng, Point } from '../PropTypes'
import Component from '../Component'
const style = StyleSheet.create({
overlay: {
position: 'absolute',
},
})
export default class Marker extends Component<any> {
static propTypes = {
...ViewPropTypes,
/**
* key
*/
markKey: PropTypes.oneOfType([
PropTypes.string,
PropTypes.number,
]),
/**
* 坐标
*/
coordinate: LatLng.isRequired,
/**
* 标题,作为默认的选中弹出显示
*/
title: PropTypes.string,
/**
* 描述,显示在标题下方
*/
description: PropTypes.string,
/**
* 默认图标颜色
*/
color: Platform.select({
android: PropTypes.oneOf([
'azure',
'blue',
'cyan',
'green',
'magenta',
'orange',
'red',
'rose',
'violet',
'yellow',
]),
ios: PropTypes.oneOf([
'red',
'green',
'purple',
]),
}),
/**
* 自定义图标
*/
icon: PropTypes.func,
/**
* 自定义图片,对应原生图片名称
*/
image: PropTypes.string,
/**
* 透明度 [0, 1]
*/
opacity: PropTypes.number,
/**
* 是否可拖拽
*/
draggable: PropTypes.bool,
/**
* 是否平贴地图
*/
flat: PropTypes.bool,
/**
* 层级
*/
zIndex: PropTypes.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,
/**
* 是否选中,选中时将显示信息窗体,一个地图只能有一个正在选中的 marker
*/
active: PropTypes.bool,
/**
* 是否禁用点击,默认不禁用
*/
clickDisabled: PropTypes.bool,
/**
* 是否禁用弹出窗口,默认不禁用
*/
infoWindowDisabled: PropTypes.bool,
/**
* 点击事件
*/
onPress: PropTypes.func,
/**
* 拖放开始事件
*/
onDragStart: PropTypes.func,
/**
* 拖放进行事件,类似于 mousemove,在结束之前会不断调用
*/
onDrag: PropTypes.func,
/**
* 拖放结束事件,最终坐标将传入参数
*/
onDragEnd: PropTypes.func,
/**
* 信息窗体点击事件
*
* 注意,对于自定义信息窗体,该事件是无效的
*/
onInfoWindowPress: PropTypes.func,
}
componentDidUpdate() {
if (this.icon && Platform.OS === 'android') {
setTimeout(() => this.sendCommand('update'), 0)
}
}
name = 'AMapMarker'
icon: View = null
onMarkPress = () => {
if (this.props.onPress) {
this.props.onPress(this.props.markKey)
}
}
active() {
this.sendCommand('active')
}
lockToScreen(x: number, y: number) {
this.sendCommand('lockToScreen', [x, y])
}
renderCustomMarker(icon: () => View) {
if (icon) {
this.icon = <View style={style.overlay}>{icon()}</View>
return this.icon
}
return null
}
/* eslint-disable class-methods-use-this */
renderInfoWindow(view: View) {
if (view) {
return <InfoWindow style={style.overlay}>{view}</InfoWindow>
}
return null
}
render() {
return (
<AMapMarker {...this.props} onPress={this.onMarkPress}>
{this.renderCustomMarker(this.props.icon)}
{this.renderInfoWindow(this.props.children)}
</AMapMarker>
)
}
}
const AMapMarker = requireNativeComponent('AMapMarker', Marker)
const InfoWindow = requireNativeComponent('AMapInfoWindow', {
propTypes: {
...ViewPropTypes,
},
})