kylefang/react-native
1
0
Fork 0
mirror of https://github.com/zhigang1992/react-native.git synced 2026-04-29 04:35:36 +08:00
Code Issues Packages Projects Releases Wiki Activity

Add Polyline support to MapView

Browse Source 
Summary: Per issue #1925, add support for Polyline to MapView.

Briefly, if you have a MapView declared as:

    <MapView
      annotations={this.state.annotations}
      overlays={this.state.overlays}
      style={styles.map}
      region={this.state.region}
      ref="mapView"
    />

then setting

    this.state.overlays = [{
      coordinates: [
        { latitude: 35.5, longitude: -5.5 },
        { latitude: 35.6, longitude: -5.6 },
        ...
      ],
      strokeColor: 'rgba(255, 0, 0, 0.5)',
      lineWidth: 3,
    }];

will draw a red line between the points in locations with a width of 3 and equally blended with the background.
Closes https://github.com/facebook/react-native/pull/4153

Reviewed By: svcscm

Differential Revision: D2697347

Pulled By: nicklockwood

fb-gh-sync-id: a436e4ed8d4e43f2872b39b4694fad7c02de8fe5
This commit is contained in:
Tim Park
2015-11-26 07:09:59 -08:00
committed by facebook-github-bot-3
parent a636ddd9f0
commit 8911b72d9e
12 changed files with 296 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
React/Views/RCTMapManager.m
View File

@@ -16,7 +16,8 @@
#import "RCTMap.h"
#import "RCTUtils.h"
#import "UIView+React.h"
#import "RCTPointAnnotation.h"
#import "RCTMapAnnotation.h"
#import "RCTMapOverlay.h"
#import <MapKit/MapKit.h>
@@ -48,7 +49,8 @@ RCT_EXPORT_VIEW_PROPERTY(maxDelta, CGFloat)
RCT_EXPORT_VIEW_PROPERTY(minDelta, CGFloat)
RCT_EXPORT_VIEW_PROPERTY(legalLabelInsets, UIEdgeInsets)
RCT_EXPORT_VIEW_PROPERTY(mapType, MKMapType)
RCT_EXPORT_VIEW_PROPERTY(annotations, RCTPointAnnotationArray)
RCT_EXPORT_VIEW_PROPERTY(annotations, RCTMapAnnotationArray)
RCT_EXPORT_VIEW_PROPERTY(overlays, RCTMapOverlayArray)
RCT_EXPORT_VIEW_PROPERTY(onChange, RCTBubblingEventBlock)
RCT_EXPORT_VIEW_PROPERTY(onPress, RCTBubblingEventBlock)
RCT_CUSTOM_VIEW_PROPERTY(region, MKCoordinateRegion, RCTMap)
@@ -71,9 +73,9 @@ RCT_CUSTOM_VIEW_PROPERTY(region, MKCoordinateRegion, RCTMap)
- (void)mapView:(RCTMap *)mapView didSelectAnnotationView:(MKAnnotationView *)view
{
if (mapView.onPress && [view.annotation isKindOfClass:[RCTPointAnnotation class]]) {
if (mapView.onPress && [view.annotation isKindOfClass:[RCTMapAnnotation class]]) {
RCTPointAnnotation *annotation = (RCTPointAnnotation *)view.annotation;
RCTMapAnnotation *annotation = (RCTMapAnnotation *)view.annotation;
mapView.onPress(@{
@"action": @"annotation-click",
@"annotation": @{
@@ -87,9 +89,9 @@ RCT_CUSTOM_VIEW_PROPERTY(region, MKCoordinateRegion, RCTMap)
}
}
- (MKAnnotationView *)mapView:(__unused MKMapView *)mapView viewForAnnotation:(RCTPointAnnotation *)annotation
- (MKAnnotationView *)mapView:(__unused MKMapView *)mapView viewForAnnotation:(RCTMapAnnotation *)annotation
{
if (![annotation isKindOfClass:[RCTPointAnnotation class]]) {
if (![annotation isKindOfClass:[RCTMapAnnotation class]]) {
return nil;
}
@@ -142,12 +144,24 @@ RCT_CUSTOM_VIEW_PROPERTY(region, MKCoordinateRegion, RCTMap)
return annotationView;
}
- (MKOverlayRenderer *)mapView:(__unused MKMapView *)mapView rendererForOverlay:(RCTMapOverlay *)overlay
{
if ([overlay isKindOfClass:[RCTMapOverlay class]]) {
MKPolylineRenderer *polylineRenderer = [[MKPolylineRenderer alloc] initWithPolyline:overlay];
polylineRenderer.strokeColor = overlay.strokeColor;
polylineRenderer.lineWidth = overlay.lineWidth;
return polylineRenderer;
} else {
return nil;
}
}
- (void)mapView:(RCTMap *)mapView annotationView:(MKAnnotationView *)view calloutAccessoryControlTapped:(UIControl *)control
{
if (mapView.onPress) {
// Pass to js
RCTPointAnnotation *annotation = (RCTPointAnnotation *)view.annotation;
RCTMapAnnotation *annotation = (RCTMapAnnotation *)view.annotation;
mapView.onPress(@{
@"side": (control == view.leftCalloutAccessoryView) ? @"left" : @"right",
@"action": @"callout-click",