1

编辑：在工作了一天之后，我相信我知道发生了什么，但我还没有确认。一旦我确定，我会发布它作为答案。

我很确定发生了什么是因为 Google Maps API 是通过 AjaxLoader 实用程序从 GWT 加载的，所以当加载包含 USGSOverlay 代码的 javascript 库时，google.maps.OverlayView 没有被解析，所以该行

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

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

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

function OverlayParent() {
}

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

并将我的USGSOverlay.prototype更改为等于new OverlayParent()继承有效，我没有得到异常this.SetMap(map) is not a function。

如果有人对此有现成的解决方案，我会很感激一个链接，但我正在寻求一个类似于这个DOM-Based On-Demand Javascript的解决方案

我是 Java Script 的新手，但是一个非常有经验的程序员，这让我很难过。我已经为此工作了几天，进展甚微。在最新版本中，我几乎完全复制了来自Google Maps JavaScript API v3 CustomOverlay的代码。OverlayView 的相关文档指出“您应该通过将叠加层的原型设置为新的 OverlayView.prototype 来继承此类。” 我真的不认为我遇到的问题是特定于 Google Maps 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 Script 对象来验证我传入的参数是否正确。该函数如下所示：

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);
 }

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

我已经阅读了许多关于原型继承的帖子，并且我知道这是一个不平凡的主题，但我尝试过的任何事情都没有更接近。我在 IE 8 中的行为与在 Firefox 中的行为相同。您能提供的任何建议将不胜感激，我的想法已经不多了。

4

3 回答 3

0

我遇到了同样的问题，但我不喜欢按照您在答案中描述的方式动态加载自定义覆盖脚本的想法。

你是如何调用initialize()函数的？

我正在像这样加载 Google Maps API：

<!-- I omitted sensor=false so this would fit without scrollbars -->
<script type="text/javascript" 
    src="http://maps.googleapis.com/maps/api/js?callback=initialize">
</script>

注意 callback=initialize. 这就是导致比赛条件的原因。我callback=initialize从获取 API 的查询字符串中删除，并将其添加到我的init.js脚本的底部：

window.onload = initialize();

这为我解决了它。希望这可以帮助！

于 2012-11-12T22:55:18.547 回答
0

我终于能够诊断出这个问题并纠正它。这个问题类似于竞态条件，但我不敢这么称呼它，因为正确的顺序永远不会发生。

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

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

这是一篇文章的链接，该文章描述了我如何动态加载 java 脚本。基于需求Javascript的DOM

为了解决未加载库的竞争条件，我只是添加了一个

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

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

于 2012-10-06T14:41:13.320 回答
0

因此，根据文档，谷歌图表于 2016 年 2 月 23 日发布，是当前的官方版本。

这就是我发现需要更新的内容。

我希望这有帮助！

干杯，杰伊

于 2017-01-03T23:26:30.167 回答