騰訊位置服務地圖SDK自定義地圖和路況

前言

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

來源：簡書

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