Commit 0ba4cf0c authored by Qiu Xiang's avatar Qiu Xiang

优化 iOS marker 的实现

parent faa051ac
...@@ -27,8 +27,9 @@ export default class MarkerExample extends Component { ...@@ -27,8 +27,9 @@ export default class MarkerExample extends Component {
render() { render() {
return <MapView style={StyleSheet.absoluteFill}> return <MapView style={StyleSheet.absoluteFill}>
<Marker <Marker
active
draggable draggable
title='一个可拖拽的 Marker' title={'一个可拖拽的 Marker ' + this.state.time.toLocaleTimeString()}
onDragEnd={({nativeEvent}) => onDragEnd={({nativeEvent}) =>
Alert.alert(`新坐标:${nativeEvent.latitude}, ${nativeEvent.longitude}`)} Alert.alert(`新坐标:${nativeEvent.latitude}, ${nativeEvent.longitude}`)}
onInfoWindowPress={() => Alert.alert('信息窗口点击事件')} onInfoWindowPress={() => Alert.alert('信息窗口点击事件')}
...@@ -38,8 +39,7 @@ export default class MarkerExample extends Component { ...@@ -38,8 +39,7 @@ export default class MarkerExample extends Component {
}} }}
/> />
<Marker <Marker
active icon='green'
icon='red'
infoWindowWidth={100} infoWindowWidth={100}
coordinate={{ coordinate={{
latitude: 39.806901, latitude: 39.806901,
...@@ -84,15 +84,19 @@ const styles = StyleSheet.create({ ...@@ -84,15 +84,19 @@ const styles = StyleSheet.create({
height: 40, height: 40,
}, },
customInfoWindow: { customInfoWindow: {
backgroundColor: '#fff', backgroundColor: '#8bc34a',
position: 'absolute', position: 'absolute',
padding: 10, padding: 10,
borderRadius: 10,
elevation: 4, elevation: 4,
borderWidth: 2,
borderColor: '#689F38',
}, },
customMarker: { customMarker: {
position: 'absolute', position: 'absolute',
backgroundColor: '#009688', backgroundColor: '#009688',
alignItems: 'center', alignItems: 'center',
borderRadius: 5,
padding: 5, padding: 5,
}, },
markerText: { markerText: {
......
...@@ -3,20 +3,10 @@ ...@@ -3,20 +3,10 @@
#import <React/RCTComponent.h> #import <React/RCTComponent.h>
#import "AMapView.h" #import "AMapView.h"
#import "AMapOverlay.h" #import "AMapOverlay.h"
#import "AMapInfoWindow.h"
#pragma ide diagnostic ignored "OCUnusedPropertyInspection" #pragma ide diagnostic ignored "OCUnusedMethodInspection"
@class AMapView; @interface AMapMarker : UIView <MAAnnotation, AMapOverlayDelegate>
@class AMapOverlay;
@class AMapInfoWindow;
@interface AMapMarker : MAPinAnnotationView <MAAnnotation, AMapOverlayDelegate>
@property(nonatomic, assign) CLLocationCoordinate2D coordinate;
@property(nonatomic, copy) NSString *title;
@property(nonatomic, copy) NSString *subtitle;
@property(nonatomic, strong) AMapView *mapView;
@property (nonatomic, copy) RCTBubblingEventBlock onPress; @property (nonatomic, copy) RCTBubblingEventBlock onPress;
@property (nonatomic, copy) RCTBubblingEventBlock onInfoWindowPress; @property (nonatomic, copy) RCTBubblingEventBlock onInfoWindowPress;
...@@ -24,7 +14,14 @@ ...@@ -24,7 +14,14 @@
@property (nonatomic, copy) RCTBubblingEventBlock onDrag; @property (nonatomic, copy) RCTBubblingEventBlock onDrag;
@property (nonatomic, copy) RCTBubblingEventBlock onDragEnd; @property (nonatomic, copy) RCTBubblingEventBlock onDragEnd;
- (MAAnnotationView *)getAnnotationView;
- (BOOL)active; - (BOOL)active;
- (CLLocationCoordinate2D)coordinate;
- (NSString *)title;
- (NSString *)subtitle;
- (MAAnnotationView *)annotationView;
- (void)setMapView:(AMapView *)mapView;
- (void)setCoordinate:(CLLocationCoordinate2D)coordinate;
@end @end
...@@ -3,67 +3,104 @@ ...@@ -3,67 +3,104 @@
#pragma ide diagnostic ignored "OCUnusedMethodInspection" #pragma ide diagnostic ignored "OCUnusedMethodInspection"
@implementation AMapMarker { @implementation AMapMarker {
MAPinAnnotationView *_pinView; MAPinAnnotationView *_annotationView;
AMapOverlay *_iconView; MAPointAnnotation *_annotation;
AMapOverlay *_overlay;
AMapView *_mapView;
BOOL _active; BOOL _active;
} }
- (instancetype)init {
_annotation = [MAPointAnnotation new];
_annotationView = [[MAPinAnnotationView alloc] initWithAnnotation:_annotation reuseIdentifier:nil];
_annotationView.canShowCallout = YES;
self = [super init];
return self;
}
- (MAAnnotationView *)annotationView {
return _annotationView;
}
- (NSString *)title {
return _annotation.title;
}
- (NSString *)subtitle {
return _annotation.subtitle;
}
- (CLLocationCoordinate2D)coordinate {
return _annotation.coordinate;
}
- (void)setCoordinate:(CLLocationCoordinate2D)coordinate {
_annotation.coordinate = coordinate;
}
- (void)setTitle:(NSString *)title {
_annotation.title = title;
}
- (void)setSubtitle:(NSString *)subtitle {
_annotation.subtitle = subtitle;
}
- (void)setActive:(BOOL)active { - (void)setActive:(BOOL)active {
_active = active; _active = active;
if (active) { if (active) {
[self.mapView selectAnnotation:self animated:YES]; [_mapView selectAnnotation:self animated:YES];
} else {
[_mapView deselectAnnotation:self animated:YES];
} }
} }
- (void)setIcon:(MAPinAnnotationColor)color { - (void)setIcon:(MAPinAnnotationColor)color {
self.pinColor = color; _annotationView.pinColor = color;
} }
- (void)setDescription:(NSString *)description { - (void)setDescription:(NSString *)description {
self.subtitle = description; _annotationView.annotation.subtitle = description;
}
- (void)setDraggable:(BOOL)draggable {
_annotationView.draggable = draggable;
} }
- (void)setInfoWindowEnabled:(BOOL)enabled { - (void)setInfoWindowEnabled:(BOOL)enabled {
self.canShowCallout = enabled; _annotationView.canShowCallout = enabled;
} }
- (MAAnnotationView *)getAnnotationView { - (void)setZIndex:(NSInteger)zIndex {
if (_pinView == nil) { _annotationView.zIndex = zIndex;
_pinView = [[MAPinAnnotationView alloc] initWithAnnotation:self reuseIdentifier: nil]; }
_pinView.annotation = self;
_pinView.zIndex = self.zIndex; - (void)setMapView:(AMapView *)mapView {
_pinView.pinColor = self.pinColor; _mapView = mapView;
_pinView.draggable = self.draggable;
_pinView.canShowCallout = self.canShowCallout;
_pinView.customCalloutView = self.customCalloutView;
}
if (_iconView != nil) {
_pinView.image = nil;
}
return _pinView;
} }
- (BOOL)active { - (BOOL)active {
return _active; return _active;
} }
- (void)insertReactSubview:(id<RCTComponent>)subview atIndex:(NSInteger)atIndex { - (void)insertReactSubview:(id <RCTComponent>)subview atIndex:(NSInteger)atIndex {
if ([subview isKindOfClass:[AMapOverlay class]]) { if ([subview isKindOfClass:[AMapOverlay class]]) {
_iconView = (AMapOverlay *)subview; _overlay = (AMapOverlay *) subview;
_iconView.delegate = self; _overlay.delegate = self;
} _annotationView.image = nil;
if ([subview isKindOfClass:[AMapInfoWindow class]]) { } else {
self.customCalloutView = [[MACustomCalloutView alloc] initWithCustomView:(id) subview]; _annotationView.customCalloutView = [[MACustomCalloutView alloc] initWithCustomView:(id) subview];
} }
} }
#pragma mark AMapOverlayDelegate #pragma mark AMapOverlayDelegate
- (void)update { - (void)update {
UIGraphicsBeginImageContextWithOptions([_iconView bounds].size, NO, 0.0f); UIGraphicsBeginImageContextWithOptions([_overlay bounds].size, NO, 0.0f);
[_iconView.layer renderInContext:UIGraphicsGetCurrentContext()]; [_overlay.layer renderInContext:UIGraphicsGetCurrentContext()];
UIImage *image = UIGraphicsGetImageFromCurrentImageContext(); UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext(); UIGraphicsEndImageContext();
_pinView.image = image; _annotationView.image = image;
} }
@end @end
...@@ -13,9 +13,7 @@ ...@@ -13,9 +13,7 @@
RCT_EXPORT_MODULE() RCT_EXPORT_MODULE()
- (UIView *)view { - (UIView *)view {
AMapMarker *marker = [AMapMarker new]; return [AMapMarker new];
marker.canShowCallout = YES;
return marker;
} }
RCT_EXPORT_VIEW_PROPERTY(coordinate, CLLocationCoordinate2D) RCT_EXPORT_VIEW_PROPERTY(coordinate, CLLocationCoordinate2D)
......
...@@ -7,6 +7,6 @@ ...@@ -7,6 +7,6 @@
@end @end
@interface AMapOverlay : RCTView @interface AMapOverlay : RCTView
@property(nonatomic, strong) id delegate; @property(nonatomic, strong) id<AMapOverlayDelegate> delegate;
- (void)update; - (void)update;
@end @end
\ No newline at end of file
...@@ -85,7 +85,7 @@ RCT_EXPORT_VIEW_PROPERTY(onLocation, RCTBubblingEventBlock) ...@@ -85,7 +85,7 @@ RCT_EXPORT_VIEW_PROPERTY(onLocation, RCTBubblingEventBlock)
if (marker.active) { if (marker.active) {
[mapView selectAnnotation:marker animated:YES]; [mapView selectAnnotation:marker animated:YES];
} }
return [marker getAnnotationView]; return marker.annotationView;
} }
- (void)mapView:(MAMapView *)mapView didSelectAnnotationView:(MAAnnotationView *)view { - (void)mapView:(MAMapView *)mapView didSelectAnnotationView:(MAAnnotationView *)view {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment