Skip to content

Commit 51044c8

Browse files
pinpongpinpong
committed
feat: add marker drag support
1 parent 6b177a4 commit 51044c8

File tree

9 files changed

+194
-122
lines changed

9 files changed

+194
-122
lines changed

‎android/src/main/java/com/rngooglemapsplus/GoogleMapsViewImpl.kt‎

Lines changed: 35 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,7 @@ class GoogleMapsViewImpl(
4747
GoogleMap.OnPolylineClickListener,
4848
GoogleMap.OnPolygonClickListener,
4949
GoogleMap.OnCircleClickListener,
50+
GoogleMap.OnMarkerDragListener,
5051
LifecycleEventListener {
5152
private var initialized = false
5253
private var mapReady = false
@@ -136,6 +137,7 @@ class GoogleMapsViewImpl(
136137
googleMap?.setOnPolygonClickListener(this@GoogleMapsViewImpl)
137138
googleMap?.setOnCircleClickListener(this@GoogleMapsViewImpl)
138139
googleMap?.setOnMapClickListener(this@GoogleMapsViewImpl)
140+
googleMap?.setOnMarkerDragListener(this@GoogleMapsViewImpl)
139141
}
140142
initLocationCallbacks()
141143
applyPending()
@@ -481,10 +483,13 @@ class GoogleMapsViewImpl(
481483
var onLocationUpdate: ((RNLocation) -> Unit)? = null
482484
var onLocationError: ((RNLocationErrorCode) -> Unit)? = null
483485
var onMapPress: ((RNLatLng) -> Unit)? = null
484-
var onMarkerPress: ((String) -> Unit)? = null
485-
var onPolylinePress: ((String) -> Unit)? = null
486-
var onPolygonPress: ((String) -> Unit)? = null
487-
var onCirclePress: ((String) -> Unit)? = null
486+
var onMarkerPress: ((String?) -> Unit)? = null
487+
var onPolylinePress: ((String?) -> Unit)? = null
488+
var onPolygonPress: ((String?) -> Unit)? = null
489+
var onCirclePress: ((String?) -> Unit)? = null
490+
var onMarkerDragStart: ((String?, RNLatLng) -> Unit)? = null
491+
var onMarkerDrag: ((String?, RNLatLng) -> Unit)? = null
492+
var onMarkerDragEnd: ((String?, RNLatLng) -> Unit)? = null
488493
var onCameraChangeStart: ((RNRegion, RNCamera, Boolean) -> Unit)? = null
489494
var onCameraChange: ((RNRegion, RNCamera, Boolean) -> Unit)? = null
490495
var onCameraChangeComplete: ((RNRegion, RNCamera, Boolean) -> Unit)? = null
@@ -900,6 +905,7 @@ class GoogleMapsViewImpl(
900905
setOnPolygonClickListener(null)
901906
setOnCircleClickListener(null)
902907
setOnMapClickListener(null)
908+
setOnMarkerDragListener(null)
903909
}
904910
googleMap = null
905911
mapView?.apply {
@@ -955,27 +961,48 @@ class GoogleMapsViewImpl(
955961

956962
override fun onMarkerClick(marker: Marker): Boolean {
957963
marker.showInfoWindow()
958-
onMarkerPress?.invoke(marker.tag?.toString() ?: "unknown")
964+
onMarkerPress?.invoke(marker.tag?.toString())
959965
return true
960966
}
961967

962968
override fun onPolylineClick(polyline: Polyline) {
963-
onPolylinePress?.invoke(polyline.tag?.toString() ?: "unknown")
969+
onPolylinePress?.invoke(polyline.tag?.toString())
964970
}
965971

966972
override fun onPolygonClick(polygon: Polygon) {
967-
onPolygonPress?.invoke(polygon.tag?.toString() ?: "unknown")
973+
onPolygonPress?.invoke(polygon.tag?.toString())
968974
}
969975

970976
override fun onCircleClick(circle: Circle) {
971-
onCirclePress?.invoke(circle.tag?.toString() ?: "unknown")
977+
onCirclePress?.invoke(circle.tag?.toString())
972978
}
973979

974980
override fun onMapClick(coordinates: LatLng) {
975981
onMapPress?.invoke(
976982
RNLatLng(coordinates.latitude, coordinates.longitude),
977983
)
978984
}
985+
986+
override fun onMarkerDragStart(marker: Marker) {
987+
onMarkerDragStart?.invoke(
988+
marker.tag?.toString(),
989+
RNLatLng(marker.position.latitude, marker.position.longitude),
990+
)
991+
}
992+
993+
override fun onMarkerDrag(marker: Marker) {
994+
onMarkerDrag?.invoke(
995+
marker.tag?.toString(),
996+
RNLatLng(marker.position.latitude, marker.position.longitude),
997+
)
998+
}
999+
1000+
override fun onMarkerDragEnd(marker: Marker) {
1001+
onMarkerDragEnd?.invoke(
1002+
marker.tag?.toString(),
1003+
RNLatLng(marker.position.latitude, marker.position.longitude),
1004+
)
1005+
}
9791006
}
9801007

9811008
private inline fun onUi(crossinline block: () -> Unit) {

‎android/src/main/java/com/rngooglemapsplus/MapMarkerBuilder.kt‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@ class MapMarkerBuilder(
4747
m.opacity?.let { alpha(it.toFloat()) }
4848
m.flat?.let { flat(it) }
4949
m.draggable?.let { draggable(it) }
50-
anchor((m.anchor?.x ?: 0.5).toFloat(), (m.anchor?.y ?: 0.5).toFloat())
50+
m.anchor?.let { anchor((m.anchor.x).toFloat(), (m.anchor.y).toFloat()) }
5151
m.zIndex?.let { zIndex(it.toFloat()) }
5252
}
5353

@@ -74,7 +74,7 @@ class MapMarkerBuilder(
7474
marker.isDraggable = next.draggable ?: false
7575
marker.setAnchor(
7676
(next.anchor?.x ?: 0.5).toFloat(),
77-
(next.anchor?.y ?: 0.5).toFloat(),
77+
(next.anchor?.y ?: 1.0).toFloat(),
7878
)
7979
marker.zIndex = next.zIndex?.toFloat() ?: 0f
8080
}

‎android/src/main/java/com/rngooglemapsplus/RNGoogleMapsPlusView.kt‎

Lines changed: 19 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -280,26 +280,41 @@ class RNGoogleMapsPlusView(
280280
view.onMapPress = cb
281281
}
282282

283-
override var onMarkerPress: ((String) -> Unit)? = null
283+
override var onMarkerPress: ((String?) -> Unit)? = null
284284
set(cb) {
285285
view.onMarkerPress = cb
286286
}
287287

288-
override var onPolylinePress: ((String) -> Unit)? = null
288+
override var onPolylinePress: ((String?) -> Unit)? = null
289289
set(cb) {
290290
view.onPolylinePress = cb
291291
}
292292

293-
override var onPolygonPress: ((String) -> Unit)? = null
293+
override var onPolygonPress: ((String?) -> Unit)? = null
294294
set(cb) {
295295
view.onPolygonPress = cb
296296
}
297297

298-
override var onCirclePress: ((String) -> Unit)? = null
298+
override var onCirclePress: ((String?) -> Unit)? = null
299299
set(cb) {
300300
view.onCirclePress = cb
301301
}
302302

303+
override var onMarkerDragStart: ((String?, RNLatLng) -> Unit)? = null
304+
set(cb) {
305+
view.onMarkerDragStart = cb
306+
}
307+
308+
override var onMarkerDrag: ((String?, RNLatLng) -> Unit)? = null
309+
set(cb) {
310+
view.onMarkerDrag = cb
311+
}
312+
313+
override var onMarkerDragEnd: ((String?, RNLatLng) -> Unit)? = null
314+
set(cb) {
315+
view.onMarkerDragEnd = cb
316+
}
317+
303318
override var onCameraChangeStart: ((RNRegion, RNCamera, Boolean) -> Unit)? = null
304319
set(cb) {
305320
view.onCameraChangeStart = cb

‎example/src/components/MapWrapper.tsx‎

Lines changed: 77 additions & 80 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ import {
1515
} from 'react-native-google-maps-plus';
1616
import type { ViewProps } from 'react-native';
1717
import { useSafeAreaInsets } from 'react-native-safe-area-context';
18+
import { callback } from 'react-native-nitro-modules';
1819

1920
type Props = ViewProps &
2021
RNGoogleMapsPlusViewProps & {
@@ -94,86 +95,82 @@ export default function MapWrapper(props: Props) {
9495
mapZoomConfig={props.mapZoomConfig ?? mapZoomConfig}
9596
mapPadding={props.mapPadding ?? mapPadding}
9697
locationConfig={props.locationConfig ?? locationConfig}
97-
onMapReady={
98-
props.onMapReady
99-
? {
100-
f: (ready: boolean) => console.log('Map is ready! ' + ready),
101-
}
102-
: undefined
103-
}
104-
onMapPress={
105-
props.onMapPress
106-
? {
107-
f: (c: RNLatLng) => console.log('Map press:', c),
108-
}
109-
: undefined
110-
}
111-
onMarkerPress={
112-
props.onMarkerPress
113-
? {
114-
f: (id: string) => console.log('Marker press:', id),
115-
}
116-
: undefined
117-
}
118-
onPolylinePress={
119-
props.onPolylinePress
120-
? {
121-
f: (id: string) => console.log('Polyline press:', id),
122-
}
123-
: undefined
124-
}
125-
onPolygonPress={
126-
props.onPolygonPress
127-
? {
128-
f: (id: string) => console.log('Polygon press:', id),
129-
}
130-
: undefined
131-
}
132-
onCirclePress={
133-
props.onCirclePress
134-
? {
135-
f: (id: string) => console.log('Circle press:', id),
136-
}
137-
: undefined
138-
}
139-
onCameraChangeStart={
140-
props.onCameraChangeStart
141-
? {
142-
f: (r: RNRegion, cam: RNCamera, g: boolean) =>
143-
console.log('Cam start', r, cam, g),
144-
}
145-
: undefined
146-
}
147-
onCameraChange={
148-
props.onCameraChange
149-
? {
150-
f: (r: RNRegion, cam: RNCamera, g: boolean) =>
151-
console.log('Cam', r, cam, g),
152-
}
153-
: undefined
154-
}
155-
onCameraChangeComplete={
156-
props.onCameraChangeComplete
157-
? {
158-
f: (r: RNRegion, cam: RNCamera, g: boolean) =>
159-
console.log('Cam complete', r, cam, g),
160-
}
161-
: undefined
162-
}
163-
onLocationUpdate={
164-
props.onLocationUpdate
165-
? {
166-
f: (l: RNLocation) => console.log('Location', l),
167-
}
168-
: undefined
169-
}
170-
onLocationError={
171-
props.onLocationError
172-
? {
173-
f: (e: any) => console.log('Location error', e),
174-
}
175-
: undefined
176-
}
98+
onMapReady={callback(
99+
props.onMapReady ?? {
100+
f: (ready: boolean) => console.log('Map is ready! ' + ready),
101+
}
102+
)}
103+
onMapPress={callback(
104+
props.onMapPress ?? {
105+
f: (c: RNLatLng) => console.log('Map press:', c),
106+
}
107+
)}
108+
onMarkerPress={callback(
109+
props.onMarkerPress ?? {
110+
f: (id: string | undefined) => console.log('Marker press:', id),
111+
}
112+
)}
113+
onPolylinePress={callback(
114+
props.onPolylinePress ?? {
115+
f: (id: string | undefined) => console.log('Polyline press:', id),
116+
}
117+
)}
118+
onPolygonPress={callback(
119+
props.onPolygonPress ?? {
120+
f: (id: string | undefined) => console.log('Polygon press:', id),
121+
}
122+
)}
123+
onCirclePress={callback(
124+
props.onCirclePress ?? {
125+
f: (id: string | undefined) => console.log('Circle press:', id),
126+
}
127+
)}
128+
onMarkerDragStart={callback(
129+
props.onMarkerDragStart ?? {
130+
f: (id: string | undefined, latLng: RNLatLng) =>
131+
console.log('Marker drag start', id, latLng),
132+
}
133+
)}
134+
onMarkerDrag={callback(
135+
props.onMarkerDrag ?? {
136+
f: (id: string | undefined, latLng: RNLatLng) =>
137+
console.log('Marker drag', id, latLng),
138+
}
139+
)}
140+
onMarkerDragEnd={callback(
141+
props.onMarkerDragEnd ?? {
142+
f: (id: string | undefined, latLng: RNLatLng) =>
143+
console.log('Marker drag end', id, latLng),
144+
}
145+
)}
146+
onCameraChangeStart={callback(
147+
props.onCameraChangeStart ?? {
148+
f: (r: RNRegion, cam: RNCamera, g: boolean) =>
149+
console.log('Cam start', r, cam, g),
150+
}
151+
)}
152+
onCameraChange={callback(
153+
props.onCameraChange ?? {
154+
f: (r: RNRegion, cam: RNCamera, g: boolean) =>
155+
console.log('Cam', r, cam, g),
156+
}
157+
)}
158+
onCameraChangeComplete={callback(
159+
props.onCameraChangeComplete ?? {
160+
f: (r: RNRegion, cam: RNCamera, g: boolean) =>
161+
console.log('Cam complete', r, cam, g),
162+
}
163+
)}
164+
onLocationUpdate={callback(
165+
props.onLocationUpdate ?? {
166+
f: (l: RNLocation) => console.log('Location', l),
167+
}
168+
)}
169+
onLocationError={callback(
170+
props.onLocationError ?? {
171+
f: (e: any) => console.log('Location error', e),
172+
}
173+
)}
177174
/>
178175
{children}
179176
</View>

‎example/src/utils/mapGenerators.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -113,8 +113,8 @@ export function makeMarker(id: number): RNMarker {
113113
zIndex: id,
114114
coordinate: randomCoordinates(37.7749, -122.4194, 0.2),
115115
anchor: customIcon ? { x: 0.5, y: 1.0 } : undefined,
116-
title: `Marker title ${id}`,
117-
snippet: `Marker snippet ${id}`,
116+
title: `Marker title id: ${id}`,
117+
snippet: `Marker snippet id: ${id}`,
118118
draggable: customIcon,
119119
iconSvg: customIcon
120120
? {

0 commit comments

Comments
 (0)