Here Maps如何动态修改地图控件的显示语言？

云原生阿岚

2026-10-6

HERE Maps动态切换控件语言实现方案

现状说明

HERE Maps官方暂未公开H.ui.UI.setLocale这类直接动态修改UI语言的接口，原生仅支持在H.ui.UI.createDefault初始化阶段传入locale参数设置控件语言。
不需要重建整个地图实例，仅需销毁重建UI实例即可实现语言切换，性能损耗可忽略。

实现步骤

初始化阶段全局缓存无需重复创建的实例：地图实例、平台实例、默认图层实例，避免每次切换语言重复初始化基础地图资源。
切换语言前先调用dispose()方法销毁原有UI实例，避免内存泄漏。
传入新的语言参数重新创建UI实例即可完成切换。

代码示例

基础初始化（仅执行一次）

// 全局缓存实例
let mapInstance;
let platformInstance;
let defaultLayers;
let uiInstance;

function initBaseMap() {
  // 初始化平台实例
  platformInstance = new H.service.Platform({
    'apikey': '你的HERE地图开发密钥'
  });
  // 初始化默认图层
  defaultLayers = platformInstance.createDefaultLayers();
  // 初始化地图实例
  mapInstance = new H.Map(
    document.getElementById('map-container'),
    defaultLayers.vector.normal.map,
    {
      zoom: 10,
      center: { lat: 39.9075, lng: 116.3972 }
    }
  );
  // 初始化默认中文UI
  uiInstance = H.ui.UI.createDefault(mapInstance, defaultLayers, 'zh-CN');
}

动态切换语言方法

function switchUILanguage(targetLocale) {
  // 销毁已有UI实例
  if (uiInstance) {
    uiInstance.dispose();
  }
  // 按新语言创建UI实例
  uiInstance = H.ui.UI.createDefault(mapInstance, defaultLayers, targetLocale);

  // 若需要同时切换地图图层文字语言，补充以下逻辑
  // const newLayers = platformInstance.createDefaultLayers({ lang: targetLocale });
  // mapInstance.setBaseLayer(newLayers.vector.normal.map);
}