乐趣区

关于android:用HMS-Core地图服务自定义地图样式给你的应用制作专属个性化地图

jiezi

不同行业的开发者对地图款式的展现需要差别很大。例如，物流类利用心愿地图款式简洁一些，重点突出城市散布和快递门路；AR 游戏类利用中的地图色调须要和游戏 UI 适配，做的更酷炫一些；景区导览利用中的地图款式要景区特色相结合，重点出现要害景点。

自定义地图款式能够更好的投合不同行业的开发者对于地图款式的展现需要，开发者能够综合思考本身产品的应用场景、品牌色调等因素，自在创立最适宜的地图款式。

HMS Core 地图服务（Map Kit）提供了自定义地图款式能力，开发者可通过更改 Petal Maps Studio 中的款式选项，自定义地图款式的显示，更改路线、公园、企业和其余趣味点等性能的可视化显示。提供七大类，上百种地图元素的款式编辑，让开发者自在编辑个性化地图。同时，开发者只需编辑一次，地图即可实用于多种终端（Android/iOS/Web）极大的进步了开发效率

集成步骤

一、生成款式 ID

1． 登录 Petal Maps Studio，点击“Create map”创立自定义款式。

2． 导入 JSON 款式文件，点击“Import”。

3． 在编辑器里批改款式。

4． 点击“SAVE”生成预览 ID，通过预览 ID 测试款式成果。点击“PUBLISH”公布生成款式 ID，款式 ID 是惟一 ID，一旦公布失效不会变动。

二、各平台代码实现步骤

地图服务提供两种办法设置自定义地图款式：

• 设置款式文件：通过嵌入 JSON 款式申明文件手动定义地图款式的更改。

• 设置款式 ID：在 Petal Maps Studio 上创立新款式，或导入现有款式定义。款式一旦公布，应用此款式的利用都会主动利用新款式，不须要更新版本。

1. 第一种办法：设置款式文件

新建款式文件 mapstyle_road.json

[
    {
        "mapFeature": "road.highway.city",
        "options": "all",
        "paint": {"color": "#7569ce"}
    },
    {
        "mapFeature": "road.highway.country",
        "options": "all",
        "paint": {"color": "#7271c6"}
    },
    {
        "mapFeature": "road.province",
        "options": "all",
        "paint": {"color": "#6c6ae2"}
    },
    {
        "mapFeature": "road.city-arterial",
        "options": "geometry.fill",
        "paint": {"color": "#be9bca"}
    },
    {
        "mapFeature": "transit.railway",
        "options": "all",
        "paint": {"color": "#b2e6b2"}
    }
]
1.1 Android 设置款式文件

（1）在 res/raw 目录下增加 JSON 文件 mapstyle_road.json

（2）应用 loadRawResourceStyle() 办法，加载为 MapStyleOptions 对象，再将该对象传递给 HuaweiMap.setMapStyle() 办法。

private HuaweiMap hMap;
MapStyleOptions styleOptions = MapStyleOptions.loadRawResourceStyle(this, R.raw.mapstyle_road);
hMap.setMapStyle(styleOptions);
1.2 iOS 设置款式文件

（1）在工程目录下定义一个 JSON 文件 mapstyle_road.json

（2）将文件门路传递给 setMapStyle 办法 

// 读取款式文件的门路
NSString *path = [NSBundle.mainBundle pathForResource:name ofType:@"json"];
// 调用设置办法
[self.mapView setMapStyle:path];
1.3 JavaScript 设置款式文件 
map.setStyle("mapstyle_road.json");

2．第二种办法：设置预览 ID 或款式 ID

2.1 Android 设置款式 ID

Android SDK 提供两种形式设置预览 ID 或款式 ID：创立地图前、创立地图后。

（1）在创立地图后应用自定义款式。

通过调用 HuaweiMap 的 setStyleId 和 previewId 办法设置自定义款式。

private HuaweiMap hMap;
String styleIdStr = edtStyleId.getText().toString();           // 创立地图后设置款式 ID
// String previewIdStr = edtPreviewId.getText().toString();   // 在创立地图后设置预览 ID
if (TextUtils.isEmpty(styleIdStr)) {Toast.makeText(this, "Please make sure the style ID is edited", Toast.LENGTH_SHORT).show();
    return;
}
if (null != hMap) {hMap.setStyleId("859320508888914176");
    //   hMap.previewId("888359570022864384");
}

（2）在创立地图前扭转现有款式

通过调用 HuaweiMapOptions 的 styleId 和 previewId 办法设置自定义款式，当同时设置 styleId 和 previewId 时，优先应用 styleId。

FragmentManager fragmentManager = getSupportFragmentManager();
mSupportMapFragment = (SupportMapFragment) fragmentManager.findFragmentByTag("support_map_fragment");

if (mSupportMapFragment == null) {HuaweiMapOptions huaweiMapOptions = new HuaweiMapOptions();
    // please replace "styleId" with style ID field value in
    huaweiMapOptions.styleId("styleId");       // 在创立地图前设置款式 ID
    // please replace "previewId" with preview ID field value in
    huaweiMapOptions.previewId("previewId");    // 在创立地图前设置预览 ID
    mSupportMapFragment = SupportMapFragment.newInstance(huaweiMapOptions);
    FragmentTransaction fragmentTransaction = fragmentManager.beginTransaction();
    fragmentTransaction.add(R.id.map_container_layout, mSupportMapFragment, "support_map_fragment");
    fragmentTransaction.commit();}

mSupportMapFragment.getMapAsync(this);
mSupportMapFragment.onAttach(this);
2.2 iOS SDK 提供 1 种设置预览 ID 或款式 ID 的形式：创立地图后。

在创立地图后应用自定义款式，请调用 HMapView 的 setMapStyleID: 和 setMapPreviewID: 办法设置。

/**
* @brief 扭转底图款式
* @param styleID 值为在官网配置的自定义款式列表中 ID
* @return 是否设置胜利
*/
- (BOOL)setMapStyleID:(NSString*)styleID;
/**
* @brief 扭转底图款式
* @param previewID 值为在官网配置的自定义款式列表中预览 ID
* @return 是否设置胜利
*/
- (BOOL)setMapPreviewID:(NSString*)previewID;
2.3 JavaScript 提供两种形式设置预览 ID 或款式 ID：地图加载前、地图加载后

（1）在首次加载地图时应用指定自定义款式

在创立地图引入华为地图 API 文件时，减少 styleId 或者 previewId 参数，当同时传入 styleId 和 previewId 时，优先应用 styleId。留神 key 要通过 URL 转码。

<script src="https://mapapi.cloud.huawei.com/mapjs/v1/api/js?callback=initMap&key=API KEY&styleId=styleId"></script>

（2）在加载地图后扭转现有款式 

// 设置款式 ID
map.setStyleId(String styleId)
// 设置预览 ID
map.setPreviewId(String previewId)

理解更多详情 >>

拜访地图服务开发者联盟官网

获取地图服务开发领导文档

拜访华为开发者联盟官网
获取开发领导文档
华为挪动服务开源仓库地址：GitHub、Gitee

关注咱们，第一工夫理解 HMS Core 最新技术资讯~

退出移动版