如何将本地自定义PNG图标应用到HERE Maps标记？

问题场景 #

在MacOS系统中，尝试用同目录的自定义PNG图标替换HERE Maps默认标记，使用var icon = new H.map.Icon('file:///customIcon.png')引用时，出现CORS错误：

Access to image at 'file:///customIcon.png' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, isolated-app, chrome-extension, chrome, https, chrome-untrusted.

错误原因 #

直接通过file://协议打开本地HTML文件时，浏览器会将页面的origin设为null，而浏览器的CORS策略禁止从null origin访问file://协议的资源，因为该协议不在允许的跨域请求协议列表内。

解决方法 #

方法1：使用本地HTTP服务器运行（推荐） #

将HTML文件和图标放在同一目录，通过本地HTTP服务器访问页面，即可规避CORS限制：

• 打开终端，进入文件所在目录
• 运行本地服务器命令：

  # Python 3环境
  python3 -m http.server 8000
  # Python 2环境
  python -m SimpleHTTPServer 8000
  

• 在浏览器中访问http://localhost:8000/你的文件名.html
• 修改图标引用为相对路径：

  var icon = new H.map.Icon('customIcon.png');
  

方法2：将图标转换为Data URL（临时方案） #

把PNG图片转换为base64编码的Data URL，直接嵌入代码中，无需依赖外部文件：

• 使用在线工具或本地命令将图片转为Data URL（比如执行base64 customIcon.png，再给结果加上前缀data:image/png;base64,）
• 修改图标引用：

  var icon = new H.map.Icon('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AA...');
  

修改后的完整代码 #

<!DOCTYPE html>
<html>
<head>
  <title>HERE Maps Multiple Markers Example</title>
  <link rel="stylesheet" type="text/css" href="https://js.api.here.com/v3/3.1/mapsjs-ui.css" />
  <style>
    #map {
      height: 500px;
      width: 100%;
    }

    #panel {
        width: 100%;
        height: 400px;
    }
  </style>
</head>
<body>

  <script src="https://js.api.here.com/v3/3.1/mapsjs-core.js"></script>
  <script src="https://js.api.here.com/v3/3.1/mapsjs-service.js"></script>
  <script src="https://js.api.here.com/v3/3.1/mapsjs-ui.js"></script>
  <script src="https://js.api.here.com/v3/3.1/mapsjs-mapevents.js"></script>

  <div id="map"></div>

  <script>
    
    function initMap() {
      
      function addClickableMarkers(map) {
        var mapMarkers = [];

        var group = new H.map.Group();

        map.addObject(group);

        group.addEventListener('tap', function (evt) {
          var bubble = new H.ui.InfoBubble(evt.target.getGeometry(), {
            content: evt.target.getData()
          });
          
          ui.addBubble(bubble);
        }, false);

        // 使用相对路径引用同目录图标（需通过HTTP服务器访问）
        var icon = new H.map.Icon('customIcon.png');
        var marker = new H.map.Marker({lat: 53.439, lng: -2.221}, {
          icon: icon
        });
        marker.setData('<div><a href="https://www.mcfc.co.uk">Manchester City</a></div><div>City of Manchester Stadium<br />Capacity: 55,097</div>');
        group.addObject(marker);
        mapMarkers.push(marker);

        var marker = new H.map.Marker({lat: 53.430, lng: -2.961});
        marker.setData('<div><a href="https://www.liverpoolfc.tv">Liverpool</a></div><div>Anfield<br />Capacity: 54,074</div>');
        group.addObject(marker);
        mapMarkers.push(marker);

        return {
          mapGroup: group,
          mapMarkers: mapMarkers
        }

      }

      var platform = new H.service.Platform({
        apikey: "HERE_MAPS_API_KEY"
      });
      
      var defaultLayers = platform.createDefaultLayers();

        
      var map = new H.Map(document.getElementById('map'),
        defaultLayers.vector.normal.map, {
        center: {lat: 53.430, lng: -2.961},
        zoom: 7,
        pixelRatio: window.devicePixelRatio || 1
      });

      var behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map));

      var ui = H.ui.UI.createDefault(map, defaultLayers);

      const groupAndMarkers = addClickableMarkers(map);

    }

    window.addEventListener('load', initMap);
  </script>
</body>
</html>

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