HERE API在Safari浏览器异常：PWA地图定位与标记功能故障

我来帮你排查下在Safari里遇到的这些问题，大概率是Safari的权限限制、API参数错误或者SVG兼容性导致的，咱们一步步来解决：

1. 地图显示全球视图+缩放受限的问题 #

这个问题最常见的原因是用户位置获取失败，导致lat/lng变量无效，地图只能默认加载全球视图。Safari对Geolocation API的权限管控比Chrome更严格，而且如果用户拒绝授权或者获取超时，不会自动 fallback。

修复方案： #

在获取用户位置的代码中添加错误处理，确保即使位置获取失败，也有默认坐标：

// 先获取用户位置，再初始化地图
navigator.geolocation.getCurrentPosition(
  (pos) => {
    window.lat = pos.coords.latitude;
    window.lng = pos.coords.longitude;
    // 位置获取成功后再初始化地图
    initMap();
  },
  (err) => {
    console.error('获取位置失败:', err.message);
    // 设置默认坐标（比如北京），避免地图显示全球
    window.lat = 39.9042;
    window.lng = 116.4074;
    initMap();
  },
  { 
    enableHighAccuracy: true, 
    timeout: 5000, // 5秒超时
    maximumAge: 0 // 不使用缓存位置
  }
);

// 把原来的地图初始化逻辑封装成函数
function initMap() {
  $("#addLocation").on('click', function() {
    window.platform = new H.service.Platform({
      'apikey': 'MY_API_KEY'
    });
    window.defaultLayers = platform.createDefaultLayers();
    window.map = new H.Map(document.getElementById('map'), defaultLayers.vector.normal.map, {
      center: { lat: window.lat, lng: window.lng },
      zoom: 16,
      // 优化Safari的像素比处理
      pixelRatio: Math.min(window.devicePixelRatio || 1, 2)
    });
    window.addEventListener('resize', () => map.getViewPort().resize());
    window.behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map));
    window.ui = H.ui.UI.createDefault(map, defaultLayers, "de-DE");
    addDraggableMarker(map, behavior);
  });
}

另外，去掉可能导致Safari渲染异常的pixelRatio极端值，用Math.min限制在2以内，避免地图缩放异常。

2. 标记点无法显示的问题 #

你的代码里有一个Marker初始化参数的错误，这很可能是标记点不显示的核心原因：
H.map.Marker的构造函数只接受两个参数：(geometry, options)，你把volatility: true作为第三个参数传递了，这在Chrome里可能被忽略，但Safari会严格校验参数，导致Marker初始化失败。

修复方案： #

把volatility放到第二个options对象里：

function addDraggableMarker(map, behavior) {
  // 先用简单SVG测试兼容性
  var svgMarkup = '<svg width="24" height="24" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" fill="#FF5722" stroke="#FFF" stroke-width="2"/></svg>';
  var icon = new H.map.Icon(svgMarkup);
  var coords = { lat: window.lat, lng: window.lng };
  
  // 修正Marker参数：把volatility合并到options对象中
  window.marker = new H.map.Marker(
    coords,
    { 
      icon: icon,
      volatility: true // 正确的参数位置
    }
  );
  
  marker.draggable = true;
  map.addObject(marker);
  
  // 以下拖拽事件逻辑保持不变...
  map.addEventListener('dragstart', function(ev) {
    var target = ev.target,
    pointer = ev.currentPointer;
    if (target instanceof H.map.Marker) {
      var targetPosition = map.geoToScreen(target.getGeometry());
      target.offset = new H.math.Point(pointer.viewportX - targetPosition.x, pointer.viewportY - targetPosition.y);
      behavior.disable();
    }
  }, false);
  
  // dragend和drag事件代码保持不变...
}

同时，先用最简单的SVG图标测试，如果能显示，说明你原来的SVG代码存在Safari不兼容的特性（比如某些滤镜、复杂路径或者CSS属性），需要逐步简化调试。

3. 拖拽功能的兼容性优化 #

如果标记点显示后拖拽仍有问题，可以尝试调整触摸事件的处理：Safari的pointer对象属性可能和Chrome略有差异，把pointer.viewportX/pointer.viewportY替换为pointer.clientX/pointer.clientY试试：

// dragstart事件中调整
target.offset = new H.math.Point(pointer.clientX - targetPosition.x, pointer.clientY - targetPosition.y);

// drag事件中调整
target.setGeometry(map.screenToGeo(pointer.clientX - target.offset.x, pointer.clientY - target.offset.y));

总结 #

按照这个顺序排查：

1. 确保用户位置在Safari中能正常获取，添加错误 fallback
2. 修正Marker初始化的参数错误
3. 测试SVG图标的兼容性
4. 调整拖拽事件的坐标获取逻辑

这些步骤应该能解决你在Safari中遇到的所有问题。

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