即使将多个标记添加到组,此处的地图Javascript api getboundingbox仍返回null

问题描述

因此,使用下面的代码,我得到的标记就很好了。但是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调用的处理程序(当然是在循环之后)。