google-maps - Javascript 继承不适用于 google.maps.OverlayView

Question

编辑:经过一天的研究，我相信我知道发生了什么，但我还没有证实。一旦我确定，我会将其作为答案发布。

我很确定发生的情况是，因为 Google Maps API 是通过 AjaxLoader 实用程序从 GWT 加载的，所以当加载包含 USGSOverlay 代码的 javascript 库时，google.maps.OverlayView 不会被解析，所以这条线

USGSOverlay.ptototype=google.maps.OverlayView();

删除对象的原型(prototype)信息。我现在正在努力在 AjaxLoader.loadApi() 方法完成后动态加载 USGSOverlay 库。

另一个症状:当原型(prototype)设置为 google.maps.OverlayView() 时，它会破坏 USGSOverlay 的继承以及我附加到文件底部的测试对象的继承。如果我通过将这些行添加到 JS 库文件的开头来更改 USGSOverlay 对象的继承，

function OverlayParent() {
}

OverlayParent.prototype.setMap= function(map) {}

并将我的 USGSOverlay.prototype 更改为等于 new OverlayParent() 继承有效，我没有得到异常 this.SetMap(map) 是不是一个函数。

如果有人对此有现成的解决方案，我将不胜感激，但我正在寻求与此类似的解决方案 DOM-Based On-Demand Javascript

<小时/>

我是 Java Script 新手，但我是一位经验丰富的程序员，这让我感到困惑。我已经为此工作了几天，但进展甚微。在最新版本中，我几乎完全复制 Google Maps JavaScript API v3 CustomOverlay 中的代码。 。 OverlayView 的相关文档指出“您应该通过将叠加层的原型(prototype)设置为新的 OverlayView.prototype 来继承此类。”我真的不认为我遇到的问题特定于 Google map 不过API。这是代码。

function USGSOverlay(bounds, image, map) {
  // Now initialize all properties.
  this.bounds_ = bounds;
  this.image_ = image;
  this.map_ = map;

  // We define a property to hold the image's
  // div. We'll actually create this div
  // upon receipt of the add() method so we'll
  // leave it null for now.
  this.div_ = null;

  // Explicitly call setMap() on this overlay

  this.setMap(map);
}

USGSOverlay.prototype = new google.maps.OverlayView();
USGSOverlay.prototype.constructor=USGSOverlay;

接下来是前面描述的 onAdd、draw 和 onRemove 的示例实现。

单步执行代码，一切看起来都正常，直到调用继承的方法 setMap 抛出以下异常:

Cannot load Google Maps API to your browser (TypeError): this.setMap is not a function;

Fire bug 显示 proto 变量未设置。所以继承没有发生。我最初是通过 GWT JSNI 函数调用构造函数，但为了消除方程的这一部分，我编写了第二个测试 Java 脚本对象来验证我传入的参数是否正确。该函数如下所示:

function TestUSGSOverlay(map,inBound) {
  var swBound = new google.maps.LatLng(39.5, -106.0);
  var neBound = new google.maps.LatLng(40.0, -105);
  var bounds = new google.maps.LatLngBounds(swBound, neBound);
  var sw = inBound.getSouthWest();
  var ne = inBound.getNorthEast();

  var marker = new google.maps.Marker({
      position: sw,
      map: map,
      title:"South West Corner"
  });

  var marker2 = new google.maps.Marker({
      position: ne,
      map: map,
      title:"North East Corner"
  });

  // Photograph courtesy of the U.S. Geological Survey
  var srcImage = 'images/DenverWest.png';
  var usgsMap = new google.maps.GroundOverlay(srcImage,bounds);
  usgsMap.setMap(map);
  this.overlay = new USGSOverlay(bounds, srcImage, map);
 }

如果我注释掉最后一行， map 将在美国地质调查局 map 的西南和东北标记之间正确显示。我的实际要求是在表格 div 中显示一些文本，但为了尽可能接近地模仿，我替换了 map 扫描。

我读过很多关于原型(prototype)继承的文章，我知道这是一个不平凡的主题，但我所尝试的一切都没有取得任何进展。我在 IE 8 中得到的行为与在 Firefox 中得到的行为相同。您能提供的任何建议将不胜感激，我已经没有主意了。

Answer 1

我终于能够诊断这个问题并纠正它。这个问题类似于竞争条件，但我犹豫是否称其为竞争条件，因为正确的顺序永远不会出现。

问题是，在我正在开发的应用程序中，Google Maps API 是通过 Google API 的 AjaxLoader 加载的。对象，并且我的 USGSOverlay javascript 库正在作为页面加载过程的一部分进行加载。 AjaxLoader 从 GWT 入口点方法或 HTML 世界中的 onLoad 异步加载 Google Maps API，这在 javascript 加载之后发生。没有报告错误，USGSOverlay 的 javascript 构造函数存在，但对象的继承不正确。 (顺便说一句，有人可以推荐可以检测这种情况的工具吗？)

在 Firebug 调试器中可以看到无效的继承状态，因为 USGSOverlay 对象没有 __proto__ 成员变量。为了纠正这个问题，我添加了逻辑来动态加载 USGSOverlay javascript 库到 onLoad 回调方法，该方法被传递到 AjaxLoader 的 loadApi 中。方法。那么唯一剩下的问题是这种方法依赖 DOM 来检测页面头部的添加，并执行脚本加载。这反过来又导致了真正的竞争条件，当程序尝试访问库时，库经常未被加载。

这里是一篇文章的链接，该文章描述了我如何动态加载 java 脚本。 DOM Based on Demand Javascript

为了解决未加载库的竞争条件，我简单地添加了

if (typeof USGSOverlay != 'undefined') { ... }

在调用 new USGSOverlay(... 方法之前进行测试。由于我实际的 OverlayView 派生对象与悬停相关，因此这个简单的预防性异常保护足以满足我的目的。更复杂的方法是如果您的叠加层是初始显示的一部分，则需要，但这就是您的问题:)。关于如何做到这一点有很多讨论。