如何通过HERE Maps API Javascript自定义全屏控件并拦截默认行为

要保留全屏UI控件，同时替换其默认全屏行为为容器内地图放大，可通过以下步骤实现：

• 定位全屏控件元素：HERE Maps的全屏控件带有固定CSS类名（通常为H_fullscreen），直接通过DOM选择器获取该按钮元素。
• 阻止默认行为：给控件按钮添加点击事件监听器，通过event.stopPropagation()和event.preventDefault()阻断原生全屏逻辑。
• 绑定自定义缩放逻辑：在拦截事件后，调用地图实例的缩放方法，实现容器内地图放大效果。

代码示例 #

// 确保地图初始化完成后执行
map.addEventListener('ready', () => {
  // 获取全屏控件按钮
  const fullscreenControl = document.querySelector('.H_fullscreen');
  
  if (fullscreenControl) {
    fullscreenControl.addEventListener('click', (e) => {
      // 阻止默认全屏行为
      e.stopPropagation();
      e.preventDefault();
      
      // 自定义缩放逻辑：将地图放大2级（可按需调整数值）
      const currentZoom = map.getZoom();
      map.setZoom(currentZoom + 2);
    });
  }
});

注意事项 #

• 需在地图完全初始化后执行代码，避免因DOM节点未加载导致无法获取控件。
• 若API版本更新导致控件类名变化，可通过浏览器开发者工具查看控件的实际类名，调整选择器即可。

内容的提问来源于stack exchange，提问作者Nitin Karande