腾讯位置服务地图SDK自定义地图和路况
发布于 4 年前 作者 moyang 1154 次浏览 来自 分享

前言

1、自定义路况

  • 地图SDK一般的路况颜色都是相同的,如道路畅通为绿色、道路缓慢为黄色、道路拥堵为红色,但是通常都无法让用户自定义路况颜色。腾讯地图iOS SDK在4.3.9.1版本提供了自定义路况颜色功能,可以自定义路况的畅通拥堵颜色。

2、自定义地图

  • 腾讯地图SDK在提供了基础配色的情况下,还支持自定义颜色,可以将如绿地、道路、河流等元素修改为自己指定的颜色,实现了高度自定义。

使用场景

1、自定义道路路况颜色

2、自定义地图元素颜色

准备

1、腾讯地图iOS SDK

2、腾讯地图控制台自定义地图样式

接入流程

1、自定义路况:

1)、创建QMapView时添加配置:

  • 通常创建地图对象时直接使用的initWithFrame:方法,而QMapView还提供了另一个可以添加配置的方法
// QMapConfig提供了一个初始化方法,这个方法可以用于设置一个辅助Key
// - (instancetype)initWithSubID:(NSString *)subID subKey:(NSString *)subKey;
QMapConfig *config = [[QMapConfig alloc] init];
QMapView *mapView = [[QMapView alloc] initWithFrame:self.view.bounds config]:

2)、创建路况样式对象,并设置路况颜色:

QMapConfig *config = [[QMapConfig alloc] init];
QTrafficStyle *style = [[QTrafficStyle alloc] init];

// 统一描边颜色
UIColor *whiteColor = [UIColor colorWithRed:255/255.0 green:255/255.0 blue:255/255.0 alpha:1];

// 交通顺畅颜色:青绿色
style.smoothColor = [UIColor colorWithRed:138/255.0 green:217/255.0 blue:28/255.0 alpha:1];
// 交通顺畅描边颜色
style.smoothBorderColor = whiteColor;

// 交通缓慢颜色:黄色
style.slowColor = [UIColor colorWithRed:244/255.0 green:247/255.0 blue:89/255.0 alpha:1];
// 交通缓慢描边颜色
style.slowBorderColor = whiteColor;

// 交通拥堵配色:橘色
style.congestedColor = [UIColor colorWithRed:250/255.0 green:154/255.0 blue:0 alpha:1];
style.congestedBorderColor = whiteColor;

// 交通非常拥堵颜色:红色
style.seriouseCongestedColor = [UIColor colorWithRed:255/255.0 green:0 blue:0 alpha:1];
// 交通非常拥堵描边颜色
style.seriouseCongestedBorderColor = whiteColor;

// 路况线宽
style.lineWidth = 2;
config.trafficStyle = style;

3)、图片示例(西直门经典拥堵路段)

2、自定义地图样式

1)、首先,登录到腾讯地图管理控制台,然后进入个性化地图里面,随便找一个模板,选择编辑样式:

2)、左边的侧边栏显示的是地图中可以去自定义的颜色:

  • 修改前

  • 修改后

3、在iOS端套用自定义样式模板

  • 在控制台将保存好的模板添加到对应的Key中,这里我将其放在了第三个栏位,在初始化QMapView地图实例之后,只需要调用接口就可以切换样式了:[mapView setMapStyle:3];

  • 图片示例

注意

目前自定义路况只支持一次性的配置,不能动态修改,我们后续会多多完善的。

作者:面糊

链接:https://www.jianshu.com/p/fa279777aae3

来源:简书

著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

回到顶部