如何在MAP上渲染标记时显示加载图标

Question

Rightnow我正在开发一个应用程序，我必须在地图上显示大量标记（30K到50K）。现在，在渲染地图时需要时间渲染整个点，所以我想添加一个加载GIF图标，而Navteq地图呈现点，用户将意识到该地图正在渲染点。

我正在使用最新的诺基亚（此处） - 地图API版本2.5.3。 我已经尝试过transitionstart和transistionend事件，但它没有显示我的GIF图标，但是如果我只处理tranisionstart事件，那么将显示ICON。但是如果我处理这两个事件，它会显示图标，我怀疑它是由于开始和结束事件都附带sideside。

我尝试这样做：

的JavaScript：

map = new nokia.maps.map.Display(mapContainer, { 
    // Initial center and zoom level of the map 

    center: [51.410496, 5.459197], 
    zoomLevel: ZoomLevel, 
    components: [ 
     // We add the behavior component to allow panning/zooming of the map 
     new nokia.maps.map.component.Behavior(), 
     new nokia.maps.map.component.ZoomBar(), 
     new nokia.maps.map.component.Overview(), 
     new nokia.maps.map.component.TypeSelector(), 
     new nokia.maps.map.component.ScaleBar(), 
     infoBubbles 
    ] 
}); 
map.addListener("transitionstart", function() { 
    ChangeProgressGif(true); 
}); 

map.addListener("transitionend", function() { 
     ChangeProgressGif(false); 
    }); 


function ChangeProgressGif(progressFlag) 
{  
    if (progressFlag) 
     document.getElementById("ProgressIcon").style.visibility = "visible"; 
    else 
     document.getElementById("ProgressIcon").style.visibility = "hidden"; 
} 

HTML：

<img src="Images\\Resources\\LoadingGIF.gif" id="ProgressIcon"/> 

注：我已经尝试BaseMapChangeStart和BaseMapChangeEnd事件也不过没有人工作。任何帮助将不胜感激。

编辑：尝试@Jason解决方案后，其即使考虑一段时间CluterProvider状态更改为ready后呈现点。

以及在评论中提到的，我也尝试过使用状态Clustered，但状态Clustered在ReadyState之前。

从铬控制台输出：

从我观察到，有很多现成的状态，我们可以找出哪一个是最后的准备状态，使我们可以停止控制台/隐藏加载图标。

谢谢。

Answer 1

察看集群完成

你可能想的观察者添加到集群中提供的state属性代替：

function clusterDataPoints(data) { 
    clusterProvider = new nokia.maps.clustering.ClusterProvider(map, { 
    eps: 16, 
    minPts: 1, 
    dataPoints: data 
    }); 

    clusterProvider.addObserver("state", 
    function (obj, key, newValue, oldValue) { 
     console.log(newValue); 
    } 
); 
    clusterProvider.cluster(); 
} 

的ClusterProvider将改变状态STATE_READY每当集群做完了。

添加加载图标

添加“加载”图标，你应该添加自定义地图控件是这样的：

function extend(B, A) { 
    function I() {} 
    I.prototype = A.prototype; 
    B.prototype = new I(); 
    B.prototype.constructor = B; 
} 

function HtmlControl (html, id) { 
    nokia.maps.map.component.Component.call(this); 
    this.init(html, id); 
} 

extend(HtmlControl, 
    nokia.maps.map.component.Component); 


HtmlControl.prototype.init = function (html, id) { 
    that = this; 
    that.id = id 
    that.set('node', document.createElement('div')); 
    that.node.innerHTML = html; 
}; 

HtmlControl.prototype.getId = function() { 
    return 'HtmlControl.' + this.id; 
}; 

HtmlControl.prototype.attach = function (map) { 
    map.getUIContainer().appendChild(this.node); 
}; 

HtmlControl.prototype.detach = function (display) { 
    map.getUIContainer().removeChild(this.node); 
}; 

它可以添加到地图是这样的：

htmlControl = new HtmlControl(
    '<div class=\'loader\' style=\'width:540px; height:334px; display:block\'></div>', 'Loader'); 
    map.components.add(htmlControl); 

和样式化使用CSS：

<style> 
    .loader { 
    position: relative; 
    top:0; 
    left:0; 
    bottom:0; 
    right:0; 
    background-color:black; 
    background-color: rgba(0,0,0,0.5); 
    background-image: url(img/loading.gif); 
    background-position: 50% 50%; 
    background-repeat: no-repeat; 
    } 
    </style> 

然后你只需要add()或remove()这个html控件来显示加载的gif。