Question

我正在使用基于Google地图API的Vue（版本2.x）构建组件。

在此API中，有一个嵌入式函数可以获取地图的边框：getBounds（）（ref）。

在我的代码中，我使用border对象等于0来初始化地图：

          currentBorders: {
              b: {
                  b: 0,
                  f: 0,
              },
              f: {
                  b: 0,
                  f: 0,
              },
          },

之后，我显示具有特定中心的地图，并执行getBounds（）函数以获取地图居中后的当前值：

      getBorders() {
          console.log(this.currentBorders); // -> prints the object with all values equal to 0

          this.currentBorders = this.$map.getBounds();

          console.log(this.currentBorders); // -> prints undefined

          return {
              llc_lat: this.currentBorders.f.b,
              llc_lng: this.currentBorders.b.b,
              urc_lat: this.currentBorders.f.f,
              urc_lng: this.currentBorders.b.f,
          };
      },

现在，问题是在第一次执行期间我将currentBorders设置为0，但getBounds（）的第一次执行返回undefined，可能是因为尚未加载地图。

我想做的是阻止执行该代码，直到getBounds返回有意义的内容。这是要走的路吗？我怎样才能做到这一点？

编辑：这是我通过deferredReady初始化地图的方式：

  deferredReady() {
      this.$map.setOptions({
          styles: mapStyles(),
      });

      this.initializeMapOverlay();
      this.canvasContext = this.mapCanvas.getContext("2d");
      this.$map.addListener("idle", this.idleHandler);
      this.$map.addListener("zoom_changed", () => {
          this.resizeCanvas();
          this.clearCanvas();
      });
      this.$map.addListener("mousemove", this.mouseoverHandler);
      this.$map.addListener("drag", this.fetchHexagons());
  },

Answer 1

您应该等到执行代码，直到您知道地图已完全加载为止。我们可以这样做：

google.maps.event.addListenerOnce(map, 'idle', function(){
    // idle state is triggered once map is fully loaded, or failed to load. 
});

这样，您可以保证只有在完全加载地图并且可以访问所有相应对象时才运行代码。只需将代码放在事件监听器的主体中即可。

看看这对你有用。

修改

我看到您确实在代码中定义了idle事件。我不确定vue是如何工作的，但也许有一种方法可以在运行该事件后运行代码。也许将代码放在idleHandler函数中，看看它是否在那里工作。

使函数在javascript中等待结果

1 个答案: