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

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

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

我试过这个：

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：

注意：我也尝试了BaseMapChangeStart和BaseMapChangeEnd事件，但没有一个工作。 任何帮助将不胜感激。

编辑：在尝试@Jason解决方案之后，在CluterProvider状态更改为ready后，甚至需要一些时间来渲染点数。

并且正如我在评论中所提到的那样，我尝试使用状态Clustered ，但状态Clustered在ReadyState之前。

chrome的控制台输出：

在此处输入图像描述

从控制台我发现有很多就绪状态，我们可以确定哪一个是最后一个就绪状态，以便我们可以停止/隐藏加载图标。

谢谢。

检查群集是否完整

您可能希望将观察者添加到集群提供程序的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( '
', 'Loader'); map.components.add(htmlControl);

并使用CSS设置样式：

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

Interesting Posts