here-api - Here Maps 3.0 中大量标记位置应该如何刷新？

Question

注意:这是一篇旧帖子，我已经解决了要点中的大部分问题，请进一步阅读注释。我在第一次编辑中写下了剩下的问题。

现在我在2.n系列之后发现了新的3.0 Here Maps，我不知道如何实现以下目标:

• 清除整个 map
• 使用某些标记 ID 更新标记位置
• 使用某些 ID 删除某些特定标记

到目前为止的最后一次编辑，我将在此处添加它，因为它很长。我很匆忙，看起来我不知道如何在 map 上重新绘制标记而不导致标记闪烁(也就是说， map 不闪烁，但标记在删除和读取时会闪烁)! invalidateObject 是``H.map.clustering

中的一个方法

问题:如何更新标记位置，然后重新绘制 map ？

进一步查看代码作为此问题的更多上下文。我采取了一种快速方法，即删除对象而不保留对先前添加的标记的引用，更新它们的位置，然后重新绘制 map 。唉，我不知道如何更新标记位置!大约有 50 个标记，我大约每秒更新一次其位置。值得注意的是，仅删除所有对象然后重新添加它们(使用外观大致相同的标准标记)不会导致闪烁(两者都有 useCIT，在 3.0 系列中我也使用HTTPS) 在 API 版本 2.n 中。闪烁发生在 IE、FF 和 Chrome 上的 Windows 8.1 以及 3.0 版本的 Windows Phone 上。

 //Copied from http://stackoverflow.com/questions/26020199/here-nokia-maps-javascript-api-3-0-explorer-how-to-set-maker-color.
 var markup = '<svg xmlns="http://www.w3.org/2000/svg" width="28px" height="36px" >' +
            '<path d="M 19 31 C 19 32.7 16.3 34 13 34 C 9.7 34 7 32.7 7 31 C 7 29.3 9.7 ' +
            '28 13 28 C 16.3 28 19 29.3 19 31 Z" fill="#000" fill-opacity=".2"></path>' +
            '<path d="M 13 0 C 9.5 0 6.3 1.3 3.8 3.8 C 1.4 7.8 0 9.4 0 12.8 C 0 16.3 1.4 ' +
            '19.5 3.8 21.9 L 13 31 L 22.2 21.9 C 24.6 19.5 25.9 16.3 25.9 12.8 C 25.9 9.4 24.6 ' +
            '6.1 22.1 3.8 C 19.7 1.3 16.5 0 13 0 Z" fill="#fff"></path>' +
            '<path d="M 13 2.2 C 6 2.2 2.3 7.2 2.1 12.8 C 2.1 16.1 3.1 18.4 5.2 20.5 L ' +
            '13 28.2 L 20.8 20.5 C 22.9 18.4 23.8 16.2 23.8 12.8 C 23.6 7.07 20 2.2 ' +
            '13 2.2 Z" fill="${COLOR}"></path><text transform="matrix( 1 0 0 1 13 18 )" x="0" y="0" fill-opacity="1" ' +
            'fill="#fff" text-anchor="middle" font-weight="bold" font-size="13px" font-family="arial" style="fill:black">${TEXT}</text></svg>'

    function createMarker(id, la, ln) {                                    
        var icon = new H.map.Icon(markup.replace('${COLOR}', '#FF8800').replace('${TEXT}', id));
        var marker = new H.map.Marker({ lat: la, lng: ln }, { icon: icon });

        return marker;
    }

var updates = updateBatch;
var len = updates.length;
var newMarkers = [len];
for (i = 0; i < len; i++) {
    var update = updates[i];
    var marker = createMarker(update.Id, update.Latitude, update.Longitude);
     newMarkers[i] = marker;
 }

 map.removeObjects(map.getObjects());
 map.addObjects(newMarkers);

例如，在2.n系列中用于清除 map 的有{map}.objects.clear，但看起来它现在已经消失了，我可以'找到 3.0 版本 API 的文档。

<编辑:睡了几个小时后，我发现了有关删除 Maps API for JavaScript Developer's Guide (3.0.5) 的问题第 26 页及以后的内容，例如在第 76 页，有 removeObjects() 可以清除所有内容。

现在我只需要弄清楚如何更新已添加到 map 中的标记位置。文档中的一个简短片段:

Adding and Removing Objects

Each map object type corresponds to a class in the API. A newly created instance of such a class does not automatically appear on the map, but, like a node in the HTML document object model (DOM), must be added to the root. This means that to make an object appear on the map, it must be added to the map's root group through a call to the map object's method addObject(). Conversely, to remove an object from the map, a call to the map object's method removeObject() is required.

Groups have their own addObject() and removeObject() methods and behave like container elements in the HTML document object model. It is possible to add an empty group to the map and add individual objects later. The code below demonstrates how to create an empty group, add it to the map, then create a marker and make it a member of the group.

// Create a group that can hold map objects:
group = new H.map.Group();
// Add the group to the map object (created earlier):
map.addObject(group);
// Create a marker:
marker = new H.map.Marker(map.getCenter());
// Add the marker to the group (which causes
// it to be displayed on the map)
group.addObject(marker);

H.map.provider中有一个方法invalidateObject (mapObject,changes)，它需要一个H.map 对象。然后 changes 是一个定义更改类型的位掩码，但是文档没有告诉我如果我想在新位置使用标记重新绘制 map ，应该输入什么内容，只是

signed 32 bit integer (JS restriction) where bit operator can be applied to. The range is [-2,147,483,648 ... 2,147,483,647] or [-2^31 ... 2^31 − 1]

问题:是否应该使用 -1 作为位掩码来重绘 map 对象？ (我已经有一段时间没有使用开发工具了，所以不能假设，尽管我无论如何都想了解这些位掩码。)

Answer 1

如果删除所有对象然后重新添加它们，技巧是将标记添加到两个 H.map.Group 对象，以使用 setVisibility 设置双缓冲= true/false，调用 .removeAll 到已切换到后台的那个(通过将可见性设置为 false)并切换标记容器变量。

一种更优雅的解决方案是只有一个容器，更新其中标记的位置，然后删除没有更新的标记(或其他适当的操作)。

function nonUpdated(markers, updates) {
    var map = {};
    var updatedMarkers = [];
    var nonUpdatedMarkers = [];

    for (var i = updates.length; i--;) {
            map[updates[i].Id] = null;
    }

    //The updated ones are here in case someone finds the code useful (remove in production).
    for (var key in markers) {
        if (map.hasOwnProperty(key)) {
                updatedMarkers.push(markers[key]);
        } else {
            nonUpdatedMarkers.push(markers[key]);
        }
    }

    return nonUpdatedMarkers;
}

//JS 6 brings Map, which is superior: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map.
var markers = Object.create(null);
var g = new H.map.Group();
map.addObject(g);

var updates = updateBatch;
var len = updates.length;
for (i = 0; i < len; i++) {
    var update = updates[i];

    if (update.Id in markers) {
        markers[update.Id].setPosition({ lat: update.Latitude, lng: update.Longitude });
    } else {
        var marker = createMarker(update.Id, update.Latitude, update.Longitude);                        
        markers[update.Id] = marker;
        g.addObject(marker);
    }
}

var nonUpdatedToBeRemoved = nonUpdated(markers, updates);
if (nonUpdatedToBeRemoved.length > 0) {
    g.removeObjects(nonUpdatedToBeRemoved);
}