问题描述
因此,使用下面的代码,我得到的标记就很好了。但是bBox为null,我不知道为什么。有任何想法吗?标记明显有效。标记中的图像会引起问题吗?
我得到的错误是:
Uncaught InvalidArgumentError: H.map.viewmodel#setLookAtData (Argument #0 bounds)
at new D (https://js.api.here.com/v3/3.1/mapsjs-core.js:43:977)
at ul.Yb (https://js.api.here.com/v3/3.1/mapsjs-core.js:341:200)
at showEvents (file:///C:/Users/Brian/source/repos/dnktechapi/dnktechapi/searchform.html:201:21)
at HTMLButtonElement.onclick (file:///C:/Users/Brian/source/repos/dnktechapi/dnktechapi/searchform.html:55:64)
var icon = new H.map.Icon(svgMarkup);
var group = new H.map.Group();
fetch(url)
.then((response) => response.json())
.then((data) => {
console.log(data['events']);
for(let i=0; i < data['events'].length; i++)
{
var count = i +1;
console.log(data['events'][i]['lat']);
var svgMarkup = '<svg width="24" height="24" ' +
'xmlns="http://www.w3.org/2000/svg">' +
'<rect stroke="white" fill="#1b468d" x="1" y="1" width="22" ' +
'height="22" /><text x="12" y="18" font-size="12pt" ' +
'font-family="Arial" font-weight="bold" text-anchor="middle" ' +
'fill="white">' + count + '</text></svg>';
var icon = new H.map.Icon(svgMarkup);
// Create a marker using the prevIoUsly instantiated icon:
var marker = new H.map.Marker({ lat: data['events'][i]['lat'],lng: data['events'][i]['lng']},{ icon: icon });
// Add the marker to the map:
map.addobject(marker);
group.addobject(marker);
}
});
map.addobject(group);
console.log(group);
var bBox = group.getBoundingBox();
console.log(bBox);
map.getviewmodel().setLookAtData({
bounds: bBox
});
解决方法
您添加代码组并尝试获取边界框的代码正在立即运行,而不是在您获取调用之后。您的提取调用是异步的,这意味着在进行该网络请求时,浏览器继续运行并添加了空组。一种快速的解决方法是将行从map.addObject(group)
移到末尾,以进行fetch调用的处理程序(当然是在循环之后)。