JavaScript对象 - 构造后对象值变得不确定 [英] JavaScript Objects - Object values getting undefined after constructing

问题描述

 函数GoogleMap（container，mapOptions）{ 
 this.Container =容器; 
 this.Options = mapOptions; 
 this.Map = new google.maps.Map（document.getElementById（this.Container），this.Options）; 
 
 //方向
 this.DirectionService = new google.maps.DirectionsService（）; 
 this.DirectionRenderer = new google.maps.DirectionsRenderer（）; 
 this.DirectionRenderer.setMap（this.Map）; 
 this.DirectionId = 0; 
 this.DirectionResponse = new Array（）; 
 this.DrawDirectionDriving = drawDirectionDriving; 
} 
  

和drawDirectionDriving函数如下所示：

 函数drawDirectionDriving（start，end）{
 var request = {
 origin：start，
 destination：end，
 travelMode：google.maps.TravelMode.DRIVING 
}; 
 
 this.DirectionService.route（request，
 function（response，status）{
 if（status == google.maps.DirectionsStatus.OK）{
 this .DirectionRenderer.setDirections（response）; 
 this.DirectionResponse [this.DirectionId] = response; 
 this.DirectionId ++; 
} 
 else {
 alert（Error在绘图方向，谷歌没有回应......）; 
} 
} 
）; 
} 
  

在某个地方，我使用这样的对象：

  var myGoogleMap; 
 
函数MapInit（）{
 myGoogleMap = new GoogleMap（divMap，myMapOptions）; 
 myGoogleMap.DrawDirectionDriving（İstanbul，Ankara）; 
} 
  

Google Map显示在我的浏览器中，对象，但在DrawDirectionDriving函数中出错。

当我在这一行创建一个断点时：myGoogleMap.DrawDirectionDriving（İstanbul，Ankara）; DirectionRenderer似乎是构造的，但在此行之后（在Draw方法之后）DirectionRenderer对象看起来为空（未定义），因此它出现了像这样的错误无法获得setDirections属性，它是空的bla bla ...

您可以请我帮忙吗？

预先感谢...

解决方案

这个关键字确实指向了 route 回调函数中的其他内容。它的 DirectionRenderer 属性解析为 null / undefined

使用解引用变量：

$ b $ setDirections 属性会导致异常。 b

 函数drawDirectionDriving（start，end）{
 var request = {
 origin：start，
 destination：end，
 travelMode：google.maps.TravelMode.DRIVING 
}; 
 var that = this; 
 
 this.DirectionService.route（request，
 function（response，status）{
 if（status == google.maps.DirectionsStatus.OK）{
 that .DirectionRenderer.setDirections（response）; 
 that.DirectionResponse [this.DirectionId] = response; 
 that.DirectionId ++; 
 // ^^^^指向GoogleMap实例
 } 
 else {
 alert（绘图方向错误，Google没有回应...）; 
} 
} 
）; 
} 
  

I am trying to create an object that handles Google Maps Api as following:

function GoogleMap(container, mapOptions) {
    this.Container = container;
    this.Options = mapOptions;
    this.Map = new google.maps.Map(document.getElementById(this.Container), this.Options);

    // Direction
    this.DirectionService = new google.maps.DirectionsService();
    this.DirectionRenderer = new google.maps.DirectionsRenderer();
    this.DirectionRenderer.setMap(this.Map);
    this.DirectionId = 0;
    this.DirectionResponse = new Array();
    this.DrawDirectionDriving = drawDirectionDriving;
}

and the drawDirectionDriving function is like this:

function drawDirectionDriving(start, end) {
  var request = {
    origin: start,
    destination: end,
    travelMode: google.maps.TravelMode.DRIVING
  };

  this.DirectionService.route(request,
    function (response, status) {
      if (status == google.maps.DirectionsStatus.OK) {
        this.DirectionRenderer.setDirections(response);
        this.DirectionResponse[this.DirectionId] = response;
        this.DirectionId++;
      }
      else {
        alert("Error during drawing direction, Google is not responding...");
      }
    }
  );
}

and in somewhere, I am using the object like this:

var myGoogleMap;

function MapInit() {
    myGoogleMap = new GoogleMap("divMap", myMapOptions);
    myGoogleMap.DrawDirectionDriving("İstanbul", "Ankara");
}

The Google Map is shown on my browser, there is no problem in constructing the object but error in DrawDirectionDriving function.

When I create a breakpoint on this line: " myGoogleMap.DrawDirectionDriving("İstanbul", "Ankara");" the "DirectionRenderer" seems constructed, but after this line (after the "Draw" method) the DirectionRenderer object seems null (undefined) so it outs en error like this "couldn't get setDirections properties it is null bla bla..."

Could you please give me a hand?

Thanks in advance...

解决方案

The this keyword does point to something else in the route callback function. It's DirectionRenderer property resolves to null/undefined, and getting the setDirections property from that will cause the exception.

Use a dereferencing variable:

function drawDirectionDriving(start, end) {
  var request = {
    origin: start,
    destination: end,
    travelMode: google.maps.TravelMode.DRIVING
  };
  var that = this;

  this.DirectionService.route(request,
    function (response, status) {
      if (status == google.maps.DirectionsStatus.OK) {
        that.DirectionRenderer.setDirections(response);
        that.DirectionResponse[this.DirectionId] = response;
        that.DirectionId++;
//      ^^^^ points to the GoogleMap instance
      }
      else {
        alert("Error during drawing direction, Google is not responding...");
      }
    }
  );
}

这篇关于JavaScript对象 - 构造后对象值变得不确定的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！