【问题标题】:bing map loading only after resizing the window仅在调整窗口大小后才加载 bing 地图
【发布时间】:2017-12-01 23:47:51
【问题描述】:

我不太擅长 js,并尝试在我们的网站上使用 Bing 地图,但它会显示地图几次,并且大部分时间不显示地图。下面是加载地图函数的代码sn-p,谁能告诉我这个函数有什么问题,我在其他应用程序中使用这个:

 function loadMap(storeData) {
        var coordinates = {};
        var map;
        var stores = storeData.stores;
        if( (typeof stores !== 'undefined') && (typeof stores[0].coordinates !== 'undefined') ) {
          coordinates.lat = stores[0].coordinates.lat;
          coordinates.lng = stores[0].coordinates.lng;
        }else {
          coordinates.lat = 33.74831008911133;
          coordinates.lng = -84.39111328125;
        }

        map = new Microsoft.Maps.Map($('#bingMap')[0], {
          credentials: 'mykey',
          liteMode: true,
          enableClickableLogo: false,
          center: new Microsoft.Maps.Location(coordinates.lat, coordinates.lng)
        });

        self.center = new Microsoft.Maps.Location(coordinates.lat, coordinates.lng);        
        map.setView({zoom: 13});

        return map;
      }

我尝试了以下几个从其他 stackoverflow 查询中获得的步骤,但对我没有帮助:-(

setTimeout(this.loadMap(storeData), 2000);  Microsoft.Maps.Events.addHandler(map,'resize')

【问题讨论】:

  • setTimeout(this.loadMap.bind(this), 2000, storeData);
  • 这有效,但现在引脚消失了,在这个序列中我调用这些函数,我做错了什么 this.bingMap = this.loadMap(storeData); this.loadPins(this.bingMap, storeData, true); setTimeout(this.loadMap.bind(this), 2000, storeData);

标签: javascript bing-maps


【解决方案1】:

问题出在您的setTimeout 电话中:

你看,setTimeout 接收 2 个参数:

  1. 要执行的函数
  2. 以毫秒为单位的超时

在您的情况下,您使用了setTimeout(this.loadMap(storeData), 2000);,它不会将函数传递给 setTimeout,而是将执行结果传递给它。另外,这段代码也会立即执行this.loadMap,而不是2秒后。

要解决这个问题,您可以使用:

setTimeout(function() { this.loadMap(storeData)}, 2000);

或:(@Sysix 的解决方案) setTimeout(this.loadMap.bind(this), 2000, storeData);

【讨论】:

  • 这有效,但现在引脚消失了,在这个序列中我调用这些函数,我做错了什么 this.bingMap = this.loadMap(storeData); this.loadPins(this.bingMap, storeData, true); setTimeout(this.loadMap.bind(this), 2000, storeData);
猜你喜欢
  • 1970-01-01
  • 2023-02-09
  • 2010-12-21
  • 1970-01-01
  • 2021-01-08
  • 2019-09-22
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多