Question

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：

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

注意：我已经尝试了BaseMapChangeStart和BaseMapChangeEnd事件，但它们都没有工作。任何帮助将不胜感激。

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

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

Chrome的控制台输出：

enter image description here

从控制台

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

谢谢。

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。

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

1 个答案: