Heremaps InfoBubble CSS样式不生效问题求助（Angular v8）

一、外部CSS不生效的原因 #

Here Maps的UI组件（比如InfoBubble）会被渲染到Angular组件DOM树之外的独立节点中，而Angular默认的ViewEncapsulation样式隔离机制，会让你写在组件内的CSS无法作用到这些外部元素。

解决方法（任选其一）： #

1. 用::ng-deep穿透样式隔离
   在组件的CSS文件中，通过::ng-deep强制让样式作用到外部的InfoBubble元素：

::ng-deep .H_ui_InfoBubble {
  background-color: yellow;
  height: 275px;
}
/* 可针对内部元素细化样式 */
::ng-deep .H_ui_InfoBubble-content {
  padding: 12px;
  font-size: 14px;
}

2. 关闭当前组件的样式隔离
   在组件类中设置encapsulation: ViewEncapsulation.None，让组件内的CSS变为全局样式，从而覆盖Here Maps的默认样式：

import { Component, ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'app-map-container',
  templateUrl: './map-container.component.html',
  styleUrls: ['./map-container.component.css'],
  encapsulation: ViewEncapsulation.None
})
export class MapContainerComponent {
  // 你的地图初始化及逻辑代码
}

注意：关闭隔离后组件内的CSS会影响全局，需避免类名冲突。

3. 将样式写入全局样式文件
   直接把InfoBubble的样式添加到src/styles.css（或项目全局样式文件）中，全局样式不受Angular组件隔离限制：

.H_ui_InfoBubble {
  background-color: yellow;
  height: 275px;
}

二、Marker颜色无法修改的原因 #

你当前的marker.setData()是设置点击后InfoBubble的内容，和Marker本身的图标样式完全无关。默认Marker的图标是Here Maps内置资源，要修改颜色需要自定义Marker图标。

解决方法： #

通过H.map.Icon创建自定义样式的图标，替换默认Marker图标：

// 用SVG生成自定义颜色的Marker图标
const customMarkerSvg = `
  <svg width="28" height="28" viewBox="0 0 28 28" xmlns="http://www.w3.org/2000/svg">
    <circle cx="14" cy="14" r="12" fill="#2563eb" stroke="#ffffff" stroke-width="2"/>
    <circle cx="14" cy="14" r="6" fill="#ffffff"/>
  </svg>
`;
// 将SVG转为Icon对象
const customIcon = new H.map.Icon(customMarkerSvg, { size: { w: 28, h: 28 } });

// 创建Marker时传入自定义图标
const marker = new H.map.Marker(position, { icon: customIcon });

// 原有点击逻辑保持不变
marker.setData("<div style='width: 100px'>Hello world!</div>");
marker.addEventListener("tap", event => {
  const bubble = new H.ui.InfoBubble(event.target.getPosition(), {
    content: event.target.getData()
  }); 
  this.ui.addBubble(bubble);
}, false);

this.map.addObject(marker);

你可以修改SVG里的fill值改变Marker颜色，也可以用本地PNG图片作为图标传入H.map.Icon。

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