前言

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

來源：簡書

著作權歸作者所有。商業轉載請聯絡作者獲得授權，非商業轉載請註明出處。