HERE Maps JS v3.1：DomMarker绑定tap事件安卓设备无响应求助

问题分析 #

你当前的实现是在DomIcon的onAttach回调中给克隆后的DOM元素绑定原生tap事件，这种方式在安卓设备上存在兼容性问题——HERE Maps的DOM Marker元素在移动端的事件处理依赖于地图自身的事件系统，原生事件绑定会被地图的触摸事件拦截，导致安卓端无法触发。

修复方案 #

1. 绑定地图原生事件而非DOM元素事件 #

直接给DomMarker实例绑定HERE Maps提供的tap事件，而非给DOM元素绑定原生事件，这样能保证跨移动端的兼容性：

addDOMMarker(lat: number, lng: number, id: string, type: string) {
    const wrapperElement = document.createElement('div'), 
    markerElement = document.createElement('div');
    wrapperElement.className = 'marker-wrapper';
    markerElement.className = 'marker ' + type;
    markerElement.id = 'marker-' + id;

    wrapperElement.appendChild(markerElement);

    const domIcon = new H.map.DomIcon(wrapperElement);
    const domMarker = new H.map.DomMarker({lat: lat, lng: lng}, {icon: domIcon});

    // 直接给DomMarker绑定HERE的tap事件
    domMarker.addEventListener('tap', (evt) => {
        this.selectMarker(id, false);
        evt.stopPropagation();
    });

    return domMarker;  
}

2. 确保Marker元素可点击 #

检查你的CSS样式，确保marker相关元素没有被设置为不可点击：

.marker-wrapper, .marker {
    pointer-events: auto; /* 确保元素能接收触摸/点击事件 */
    z-index: 100; /* 避免被其他地图元素遮挡 */
}

3. 移除重复的地图对象添加 #

你的addMarkersModal方法中存在重复添加地图对象的冗余操作，建议修正：

addMarkersModal (map,points:Array<Points>,pos:PointsCoordinates) {
    const group = new H.map.Group();
    const objects = [];

    // Add markers around the target position.
    for (let i = 0; i < points.length; i++) {
        objects.push(this.addDOMMarker(points[i].address.coordinates.latitude, points[i].address.coordinates.longitude, points[i]._id, 'typePoint'));
    }

    group.addObjects(objects);
    map.addObject(group); // 只添加一次group到地图

    this.setViewBoundsFitAllMarkers(map, objects, pos, this.boundingMarkersMargin);
    return map;   
}

原理说明 #

HERE Maps的DomMarker本身集成了地图的事件系统，直接给Marker实例绑定tap事件，地图会自动处理移动端的触摸事件转换，避免原生事件在不同设备上的兼容性问题。而通过onAttach绑定原生事件，会绕过地图的事件处理逻辑，导致安卓端触摸事件被地图容器拦截。

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