VUE 中使用的 HERE Maps JS API 3.1.30.17 - Firefox 中样式组“非冲突”的错误

Question

我使用 Vue 2 和 3.1.30.17 版中的 JS API 构建了一个简单的 Here Map。 该地图在除 Firefox v102 之外的所有浏览器中都能正常工作。

这是 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

... The error is even bigger

我使用以下方法在 Vue 的挂载中初始化 Here Maps：

        async initializeHereMap() {

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

            // Initialize the platform object:
            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]);

            // Obtain the default map types from the platform object
            const defaultLayers = this.platform.createDefaultLayers({
                lg: window.navigator.language,
            });

            // Instantiate (and display) a map object:
            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,
                },
            });

            // create map pins
            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);

            // Create a polyline to display the route:
            let routeLine = new H.map.Polyline(linestring, {
                linestring,
                style: { strokeColor: '#3F80C4', lineWidth: 5 },
            });

            // Create a marker for the start point:
            let startMarker = new H.map.Marker(this.routingParameters.origin, { icon: mapPinOrigin });

            // Create a marker for the end point:
            let endMarker = new H.map.Marker(this.routingParameters.destination, { icon: mapPinDestination });

            // Add the route polyline and the two markers to the map:
            map.addObjects([routeLine, startMarker, endMarker]);

            // Set the map's viewport to make the whole route visible:
            map.getViewModel().setLookAtData({bounds: routeLine.getBoundingBox()});


            // add behavior control
            if (this.behaviors) new H.mapevents.Behavior(new H.mapevents.MapEvents(map));

            // add UI
            if (this.controls) H.ui.UI.createDefault(map, defaultLayers);
        },

是否有人面临同样的问题并且可以解决？

Answer 1

您是否遵循以下示例： https ://developer.here.com/tutorials/how-to-implement-a-web-map-using-vuejs/？

Tangram 错误与渲染有关，例如在渲染地图对象（如图标、标记、折线等）和地图矢量图块时。

我不认为这个问题与 HERE JS Map API 有关。

因为https://developer.here.com/documentation/examples/maps-js上的所有示例都在我的 FireFox 102.0.1 上运行良好

可能是某些地图对象（例如图标或标记等）在某个时刻创建但尚未完成，然后尝试推送到地图上？ 在某些异步功能中创建图标？

或像您的代码一样：

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

您不知道 func geocode 何时完成（例如，由于互联网连接速度慢） 可能是上面的这个命令尚未完成，但您的代码已经开始运行此代码：

linestring.pushPoint(this.routingParameters.origin);<-- 'this.routingParameters.origin' could be null
linestring.pushPoint(this.routingParameters.destination);

// Create a polyline to display the route:
   let routeLine = new H.map.Polyline(linestring, { <-- Could cause Tangram error because 'linestring' is strange due undefined origin yet!
         linestring,
         style: { strokeColor: '#3F80C4', lineWidth: 5 },
    });

折线选项在以下方面不正确：

new H.map.Polyline(linestring, {
             linestring,
             style: { strokeColor: '#3F80C4', lineWidth: 5 },
        }

为什么上面的“线串”是选项中的第二次？ 请遵循正确的语法： https ://developer.here.com/documentation/maps/3.1.31.0/api_reference/H.map.Polyline.html#.Options