HERE 映射 VUE 中使用的 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's mounted中的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/?

七卦图错误与渲染有关，例如渲染地图对象(如图标，标记，折线等)和地图矢量块。

我不认为这个问题与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]); 

你不知道什么时候函数地理代码将完成(例如，由于缓慢的互联网连接)可能是上面的命令还没有完成，但是你的代码已经开始运行这段代码了:

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

为什么在上面的'linestring'是第二次在选项?请遵循正确的语法:https://developer.here.com/documentation/maps/3.1.31.0/api_reference/H.map.Polyline.html .Options