浏览器版本低!无法浏览完整内容,建议升级或更换浏览器。

iOS 地图SDK

百度地图SDK是一套应用程序接口, 通过调用地图SDK接口,开发者可以轻松访问百度地图的服务和数据,构建功能丰富、交互性强的地图类应用程序。

折线类为 BMKPolyline,由一组经纬度坐标组成,并以有序序列形式建立一系列的线段。

iOS SDK支持在3D矢量地图上绘制带箭头或有纹理等样式的折线,同时可设置折线端点和连接点的类型,以满足各种绘制线的场景。支持虚线或者纹理图片绘制折线。
绘制折线

在地图上添加折线的方法如下:

1修改您的ViewController.h文件,添加以下代码,使您的ViewController实现BMKMapViewDelegate协议:
@interface OverlayDemoViewController : UIViewController <BMKMapViewDelegate>{  
    IBOutlet BMKMapView* _mapView;  
}  
@end
2修改您的ViewController.m文件,实现BMKMapViewDelegate的mapView:viewForOverlay:函数,并在viewDidLoad添加折线数据对象:
- (void)viewDidLoad {     
    [super viewDidLoad];    
    // 添加折线覆盖物    
    CLLocationCoordinate2D coor[4] = {0};
    coor[0].latitude = 39.832136;
    coor[0].longitude = 116.34095;
    
    coor[1].latitude = 39.832136;
    coor[1].longitude = 116.42095;
    
    coor[2].latitude = 39.902136;
    coor[2].longitude = 116.42095;
    
    coor[3].latitude = 39.902136;
    coor[3].longitude = 116.44095;
    BMKPolyline* polyline = [BMKPolyline polylineWithCoordinates:coor count:4];
    [_mapView addOverlay:polyline];  
// Override    
- (BMKOverlayView *)mapView:(BMKMapView *)mapView viewForOverlay:(id <BMKOverlay>)overlay{
    if ([overlay isKindOfClass:[BMKPolyline class]]){
        BMKPolylineView* polylineView = [[BMKPolylineView alloc] initWithOverlay:overlay];
        polylineView.strokeColor = [UIColor redColor];
        polylineView.lineWidth = 2.0;
        
        return polylineView;
    }
    return nil;
}
3运行结果:

ios_map_draw_2.png

分段颜色绘制折线

iOS地图SDK自v2.8.0版本起,新增了折线多段颜色绘制能力,实现的核心代码如下:

1添加折线分段颜色绘制覆盖物
核心代码如下:
CLLocationCoordinate2D coords[5] = {0};
    coords[0].latitude = 39.965;
    coords[0].longitude = 116.404;
    coords[1].latitude = 39.925;
    coords[1].longitude = 116.454;
    coords[2].latitude = 39.955;
    coords[2].longitude = 116.494;
    coords[3].latitude = 39.905;
    coords[3].longitude = 116.554;
    coords[4].latitude = 39.965;
    coords[4].longitude = 116.604;
    //构建分段颜色索引数组
    NSArray *colorIndexs = [NSArray arrayWithObjects:
                            [NSNumber numberWithInt:2],
                            [NSNumber numberWithInt:0],
                            [NSNumber numberWithInt:1],
                            [NSNumber numberWithInt:2], nil];
 
    //构建BMKPolyline,使用分段颜色索引,其对应的BMKPolylineView必须设置colors属性
   BMKPolyline *colorfulPolyline = [BMKPolyline polylineWithCoordinates:coords count:5 textureIndex:colorIndexs];
[_mapView addOverlay:colorfulPolyline];
2实现BMKMapViewDelegate回调
核心代码如下:
//根据overlay生成对应的View
- (BMKOverlayView *)mapView:(BMKMapView *)mapView viewForOverlay:(id <BMKOverlay>)overlay
{
    if ([overlay isKindOfClass:[BMKPolyline class]]) {
        BMKPolylineView* polylineView = [[BMKPolylineView alloc] initWithOverlay:overlay];
        polylineView.lineWidth = 5;
        /// 使用分段颜色绘制时,必须设置(内容必须为UIColor)
        polylineView.colors = [NSArray arrayWithObjects:[UIColor greenColor], [UIColor redColor], [UIColor yellowColor], nil];
        return polylineView;
    }
 
    return nil;
}
3运行
结果如下:

ios_map_draw_3.png

分段纹理绘制折线

自v2.9.0版本起,新增了折线分段颜色绘制能力。

纹理素材格式:纹理图片须是正方形,宽高是2的整数幂,如64*64,否则无效;若设置了纹理图片,设置线颜色、连接类型和端点类型将无效。

注意:目前仅支持对折线设置纹理,其余覆盖物目前暂不支持设置纹理。

实现的核心代码如下:

1BMKMapView对象,添加分段纹理绘制折线覆盖物
//构建顶点数组
CLLocationCoordinate2Dcoords[5] = {0};
coords[0].latitude = 39.965;
coords[0].longitude = 116.404;
coords[1].latitude = 39.925;
coords[1].longitude = 116.454;
coords[2].latitude = 39.955;
coords[2].longitude = 116.494;
coords[3].latitude = 39.905;
coords[3].longitude = 116.654;
coords[4].latitude = 39.965;
coords[4].longitude = 116.704;
//构建分段纹理索引数组
NSArray *textureIndex = [NSArrayarrayWithObjects:
                              [NSNumbernumberWithInt:0],
                              [NSNumbernumberWithInt:1],
                              [NSNumbernumberWithInt:2],
                              [NSNumbernumberWithInt:1], nil];
 
//构建BMKPolyline,使用分段纹理
BMKPolyline* polyLine = [BMKPolylinepolylineWithCoordinates:coordscount:5textureIndex:textureIndex];
//添加分段纹理绘制折线覆盖物
    [_mapViewaddOverlay:polyLine];
2实现BMKMapViewDelegate的mapView:viewForOverlay:回调
核心代码如下:
- (BMKOverlayView*)mapView:(BMKMapView *)map viewForOverlay:(id<BMKOverlay>)overlay
{
if ([overlay isKindOfClass:[BMKPolylineclass]]) {
BMKPolylineView* polylineView = [[BMKPolylineViewalloc] initWithOverlay:overlay];
polylineView.lineWidth = 5;
polylineView.isFocus = YES;// 是否分段纹理绘制(突出显示),默认YES
//加载分段纹理图片,必须否则不能进行分段纹理绘制
        [polylineView loadStrokeTextureImages:
         [NSArrayarrayWithObjects:[UIImageimageNamed:@"road_blue_arrow.png"],
          [UIImageimageNamed:@"road_green_arrow.png"],
          [UIImageimageNamed:@"road_red_arrow.png"],nil]];
returnpolylineView;
    }
returnnil;
}
3运行
结果如下:

ios_map_draw_4.png