这里映射JS API 3.1.30.17在VUE- vue -error中使用了样式组的错误＆＃x27; non -collision＆＃x27;在Firefox中

Question

我在3.1.30.17版本中使用VUE 2和JS API构建了一个简单的映射。该地图在除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的贴图：

        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错误与呈现呈现MAP对象（如图标，标记，粒料等）和MAP向量图块时有关。

我认为与此处的JS Map API相关的这个问题并不是如此。

因为在我的Firefox 102.0.1上工作正常，

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

或像您的代码一样：

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

您不知道何时完成func Geocode（例如，适当的Internet连接）
可能是以上命令尚未完成，但是您的代码已经开始运行此代码：

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 },
    });

polyline选项不正确：

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

为什么在“ linestring”上方是第二次选项？
请遵循正确的语法：