# iOS开发之在地图上绘制出你运行的轨迹

+关注继续查看

首先我们看下如何在地图上绘制曲线。在Map Kit中提供了一个叫MKPolyline的类，我们可以利用它来绘制曲线，先看个简单的例子。

使用下面代码从一个文件中读取出经纬度，然后创建一个路径：MKPolyline实例。

-(void) loadRoute
{
NSString* filePath = [[NSBundle mainBundle] pathForResource:@”route” ofType:@”csv”];
NSString* fileContents = [NSString stringWithContentsOfFile:filePath encoding:NSUTF8StringEncoding error:nil];
NSArray* pointStrings = [fileContents componentsSeparatedByCharactersInSet:[NSCharacterSet whitespaceAndNewlineCharacterSet]];// while we create the route points, we will also be calculating the bounding box of our route// so we can easily zoom in on it.MKMapPoint northEastPoint;
MKMapPoint southWestPoint; // create a c array of points.MKMapPoint* pointArr = malloc(sizeof(CLLocationCoordinate2D) * pointStrings.count);for(int idx =0; idx < pointStrings.count; idx++)
{// break the string down even further to latitude and longitude fields.NSString* currentPointString = [pointStrings objectAtIndex:idx];
NSArray* latLonArr = [currentPointString componentsSeparatedByCharactersInSet:[NSCharacterSet characterSetWithCharactersInString:@","]];
CLLocationDegrees latitude = [[latLonArr objectAtIndex:0] doubleValue];
CLLocationDegrees longitude = [[latLonArr objectAtIndex:1] doubleValue];// create our coordinate and add it to the correct spot in the arrayCLLocationCoordinate2D coordinate = CLLocationCoordinate2DMake(latitude, longitude);
MKMapPoint point = MKMapPointForCoordinate(coordinate);//// adjust the bounding box//// if it is the first point, just use them, since we have nothing to compare to yet.if (idx ==0) {
northEastPoint = point;
southWestPoint = point;
}else
{if (point.x > northEastPoint.x)
northEastPoint.x = point.x;if(point.y > northEastPoint.y)
northEastPoint.y = point.y;if (point.x < southWestPoint.x)
southWestPoint.x = point.x;if (point.y < southWestPoint.y)
southWestPoint.y = point.y;
}
pointArr[idx] = point;
}// create the polyline based on the array of points.self.routeLine = [MKPolyline polylineWithPoints:pointArr count:pointStrings.count];
_routeRect = MKMapRectMake(southWestPoint.x, southWestPoint.y, northEastPoint.x - southWestPoint.x, northEastPoint.y - southWestPoint.y);// clear the memory allocated earlier for the pointsfree(pointArr);
} 

[self.mapView addOverlay:self.routeLine];

- (MKOverlayView *)mapView:(MKMapView *)mapView viewForOverlay:(id )overlay
{
MKOverlayView* overlayView = nil;if(overlay == self.routeLine)
{//if we have not yet created an overlay view for this overlay, create it now.if(nil == self.routeLineView)
{
self.routeLineView = [[[MKPolylineView alloc] initWithPolyline:self.routeLine] autorelease];
self.routeLineView.fillColor = [UIColor redColor];
self.routeLineView.strokeColor = [UIColor redColor];
self.routeLineView.lineWidth =3;
}
overlayView = self.routeLineView;
}return overlayView;
} 

- (void)viewDidLoad {
locations = [[NSMutableArray alloc] init];
locationMgr = [[CLLocationManager alloc] init];
locationMgr.delegate= self;
locationMgr.desiredAccuracy =kCLLocationAccuracyBest;
locationMgr.distanceFilter  =1.0f;
[locationMgr startUpdatingLocation];
}

- (void)locationManager:(CLLocationManager *)manager
didUpdateToLocation:(CLLocation *)newLocation
fromLocation:(CLLocation *)oldLocation{
[locations addObject: [NSString stringWithFormat:@"%f,%f",[newLocation coordinate].latitude, [newLocation coordinate].longitude]];
[self updateLocation];if (self.routeLine!=nil) {
self.routeLine =nil;
}if(self.routeLine!=nil)
[self.mapView removeOverlay:self.routeLine];
self.routeLine =nil;// create the overlay    [self loadRoute];// add the overlay to the mapif (nil != self.routeLine) {
}// zoom in on the route.     [self zoomInOnRoute];
}

// creates the route (MKPolyline) overlay-(void) loadRoute
{// while we create the route points, we will also be calculating the bounding box of our route// so we can easily zoom in on it.     MKMapPoint northEastPoint;
MKMapPoint southWestPoint; // create a c array of points.     MKMapPoint* pointArr = malloc(sizeof(CLLocationCoordinate2D) * locations.count);for(int idx =0; idx < locations.count; idx++)
{// break the string down even further to latitude and longitude fields.         NSString* currentPointString = [locations objectAtIndex:idx];
NSArray* latLonArr = [currentPointString componentsSeparatedByCharactersInSet:[NSCharacterSet characterSetWithCharactersInString:@","]];
CLLocationDegrees latitude  = [[latLonArr objectAtIndex:0] doubleValue];
CLLocationDegrees longitude = [[latLonArr objectAtIndex:1] doubleValue];
CLLocationCoordinate2D coordinate = CLLocationCoordinate2DMake(latitude, longitude);
MKMapPoint point = MKMapPointForCoordinate(coordinate);if (idx ==0) {
northEastPoint = point;
southWestPoint = point;
}else
{if (point.x > northEastPoint.x)
northEastPoint.x = point.x;if(point.y > northEastPoint.y)
northEastPoint.y = point.y;if (point.x < southWestPoint.x)
southWestPoint.x = point.x;if (point.y < southWestPoint.y)
southWestPoint.y = point.y;
}
pointArr[idx] = point;
}
self.routeLine = [MKPolyline polylineWithPoints:pointArr count:locations.count];
_routeRect = MKMapRectMake(southWestPoint.x, southWestPoint.y, northEastPoint.x - southWestPoint.x, northEastPoint.y - southWestPoint.y);
free(pointArr);
}

如果你想使用其他的地图，比如百度地图，其实也很方便。可以将百度地图放置到UIWebView中间，通过iOS开发之Objective-C与JavaScript的交互 这篇文章的方法，用js去绘制轨迹。

71 0

209 0

1360 0
Win10 UWP开发中的重复性静态UI绘制小技巧 1

996 0
ArcGIS API for Javascript 3.21地图开发实例（一、图形绘制和删除及popup弹出层）

9711 0
IOS地图定位坐标偏差解决方案（实战通过）
--------------------------------------------------------------------- 很抱歉，本篇文章的算法经过实践证明有问题； 正确的转码算法地址见以下两个链接： http://www.
1056 0
+关注
2968

0

JS零基础入门教程（上册）