时间戳

首页 > 解决方案 > HERE MAPS Javascript api getboundingbox 返回 null 即使将多个标记添加到组

here-api - HERE MAPS Javascript api getboundingbox 返回 null 即使将多个标记添加到组

问题描述

所以使用下面的代码，我得到了很好的标记。但是 bbox 是空的，我不知道为什么。有任何想法吗？标记显然是有效的。标记中的图像是否会导致问题？

我得到的错误是：

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

标签： here-api

解决方案

添加组并尝试获取边界框的代码会立即运行，而不是在您的 fetch 调用之后运行。您的 fetch 调用是异步的，这意味着当该网络请求正在进行时，浏览器会继续并添加空组。一种快速的解决方法是将行从map.addObject(group)末尾移动到 fetch 调用的处理程序中（当然是在循环之后）。

推荐阅读