如何在MAP上渲染标记时显示加载图标 [英] How to display Loading Icon while rendering Markers on the MAP

问题描述

Rightnow我正在开发一个应用程序，其中我必须在地图上粗略显示大量标记(30K到50K).现在在绘制地图时需要花费时间来绘制整个点，因此我想添加一个在Navteq地图渲染点时加载gif图标，以便用户将意识到该地图正在渲染点.

Rightnow i'm developing an application where i have to display huge number of markers on the map roughly (30K to 50K).right now while rendering the map it is taking time to render whole points so i would like to add an loading gif icon while Navteq Map renders the pointsso that user will be aware of that map is rendering the points.

我正在使用最新的诺基亚(此处)-Maps API版本2.5.3. 我已经尝试过transitionstart和transistionend事件，但是它没有显示我的GIF图标，但是如果我只处理tranisionstart事件，则将显示ICON.但是，如果我同时处理这两个事件，它将显示该图标， m怀疑这是由于开始事件和结束事件引起的.

I'm using latest Nokia(Here)- Maps API version 2.5.3. i have tried with transitionstart and transistionend events but it is not showing my GIF icon but if i only handle the tranisionstart event then the ICON willbe shown.but if i handle both events it would display the icon, i'm suspecting that it is due to start and end events are attached 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:

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

注意:，我也尝试了BaseMapChangeStart和BaseMapChangeEnd事件，但是它们均无效.任何帮助将不胜感激.

NOTE: i have tried BaseMapChangeStart and BaseMapChangeEnd events also but none of them worked. any help would be greatly appreciated.

:尝试使用@Jason解决方案后，在CluterProvider状态更改为ready之后，甚至需要花费一些时间来渲染点.

after trying the @Jason solution it is even taking some time to render the points after the CluterProvider state is changed to ready.

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

and as mentioned in comments i tried with state Clustered as well, but state Clustered is coming before the ReadyState.

控制台从Chrome输出:

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

from the console i observed that there are many ready states and can we identify which one is the last ready state so that we can stop/hide the loading icon.

谢谢.

推荐答案

检查集群是否完成

您可能想向集群提供程序的state属性添加观察者:

You probably want to add an observer to the state property of the cluster provider instead:

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.

The ClusterProvider will change state to STATE_READY whenever clustering is complete.

添加加载图标

要添加正在加载"图标，您应该添加一个自定义地图控件，如下所示:

To add a "Loading" icon, you should add a custom map control like this:

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

可以将其添加到地图中，如下所示:

It can be added to the map like this:

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

并使用CSS设置样式:

and styled using 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.

You would then just need to add() or remove() the html control to display the loading gif.

这篇关于如何在MAP上渲染标记时显示加载图标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！