Vue集成HERE Maps JS API 3.1.30.17在Firefox报non-collision错误

算力阿峰

2026-8-27

问题描述

我基于Vue 2框架使用3.1.30.17版本的HERE Maps JS API开发了简易地图应用，除v102版本Firefox浏览器外，地图在其余所有浏览器中均可正常运行。

Firefox浏览器中抛出的错误信息如下：

Tangram [error]: Error for style group 'non-collision' for tile 20/7/68/41/7 CanvasRenderingContext2D.drawImage: Passed-in canvas is empty: loadTexture@https://js.api.here.com/v3/3.1.30.17/mapsjs-core.js:431:417267
e/sn.addWorker/<@https://js.api.here.com/v3/3.1.30.17/mapsjs-core.js:431:63015
EventListener.handleEvent*e/sn.addWorker@https://js.api.here.com/v3/3.1.30.17/mapsjs-core.js:431:62515
e/value/<@https://js.api.here.com/v3/3.1.30.17/mapsjs-core.js:431:515089
value@https://js.api.here.com/v3/3.1.30.17/mapsjs-core.js:431:515502
value@https://js.api.here.com/v3/3.1.30.17/mapsjs-core.js:431:514847
e/value/this.initializing<@https://js.api.here.com/v3/3.1.30.17/mapsjs-core.js:431:511497
promise callback*value@https://js.api.here.com/v3/3.1.30.17/mapsjs-core.js:431:511472
Ul@https://js.api.here.com/v3/3.1.30.17/mapsjs-core.js:335:441
p.eh@https://js.api.here.com/v3/3.1.30.17/mapsjs-core.js:378:446
p.Ge@https://js.api.here.com/v3/3.1.30.17/mapsjs-core.js:329:436
p.Ge@https://js.api.here.com/v3/3.1.30.17/mapsjs-core.js:376:356
S@https://js.api.here.com/v3/3.1.30.17/mapsjs-core.js:369:214
T.prototype.u@https://js.api.here.com/v3/3.1.30.17/mapsjs-core.js:410:166
T@https://js.api.here.com/v3/3.1.30.17/mapsjs-core.js:401:290

... 后续还有更多错误栈内容

我在Vue的mounted生命周期钩子中调用如下initializeHereMap方法完成地图初始化：

async initializeHereMap() {

    const mapContainer = this.$refs.hereMap;
    const H = window.H;

    // 初始化平台对象
    this.platform = new H.service.Platform({
        apikey: this.apiKey,
    });

    await this.geocode(this.platform, this.originAddress)
        .then(data => this.routingParameters.origin = data[0]);
    await this.geocode(this.platform, this.destinationAddress)
        .then(data => this.routingParameters.destination = data[0]);

    // 从平台对象获取默认地图图层
    const defaultLayers = this.platform.createDefaultLayers({
        lg: window.navigator.language,
    });

    // 初始化并渲染地图实例
    const map = new H.Map(mapContainer, defaultLayers.vector.normal.map, {
        zoom: this.zoom,
        center: this.center,
        padding: {
            top: this.padding,
            bottom: this.padding,
            left: this.padding,
            right: this.padding,
        },
    });

    // 创建地图标记点
    const mapPinOrigin = this.addMapPin('A', 40);
    const mapPinDestination = this.addMapPin('B', 40);

    let linestring = new H.geo.LineString();

    linestring.pushPoint(this.routingParameters.origin);
    linestring.pushPoint(this.routingParameters.destination);

    // 创建路线折线
    let routeLine = new H.map.Polyline(linestring, {
        linestring,
        style: { strokeColor: '#3F80C4', lineWidth: 5 },
    });

    // 创建起点标记
    let startMarker = new H.map.Marker(this.routingParameters.origin, { icon: mapPinOrigin });

    // 创建终点标记
    let endMarker = new H.map.Marker(this.routingParameters.destination, { icon: mapPinDestination });

    // 将路线和标记添加到地图
    map.addObjects([routeLine, startMarker, endMarker]);

    // 调整地图视口，完整展示整条路线
    map.getViewModel().setLookAtData({bounds: routeLine.getBoundingBox()});


    // 添加交互行为
    if (this.behaviors) new H.mapevents.Behavior(new H.mapevents.MapEvents(map));

    // 添加默认UI控件
    if (this.controls) H.ui.UI.createDefault(map, defaultLayers);
},

是否有开发者遇到过相同问题，且已找到可行的解决方案？

解决方案

这是3.1.30.17版本HERE Maps JS API和Firefox 102的已知兼容bug，根源是该版本内置的Tangram渲染引擎没有做空Canvas纹理的异常兜底，调用drawImage接口时触发了Firefox 102的原生API校验报错，按优先级尝试以下方案即可：

优先升级HERE Maps JS API到3.1.32及以上的稳定版本，官方已经在后续迭代中修复了这个兼容问题，升级后不需要修改现有业务代码，全浏览器都可正常运行。
若暂时无法升级API版本，可以将默认加载的矢量图层替换为栅格图层绕过问题，初始化地图实例时把传入的defaultLayers.vector.normal.map替换为defaultLayers.raster.normal.map即可，唯一影响是无法使用矢量地图的自定义样式、3D视角等特性，基础的地图展示、标记、路线规划功能完全不受影响。
既不想升级版本也不想换图层的话，可以给H.Map初始化参数添加配置项renderBaseBackground: false，关闭预渲染背景逻辑，大部分场景下可以避开这个空Canvas报错，缺点是地图初次加载时可能出现短暂白屏。

额外注意：Vue的mounted钩子触发时DOM节点虽然已经完成挂载，但部分Firefox版本下地图容器的实际宽高可能还未计算完成，最好把地图初始化逻辑包裹在this.$nextTick中，等容器尺寸稳定后再创建地图实例，能避免很多额外的渲染异常。

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