編集:これに別の日に取り組んだ後、私は何が起こっているのかを知っていると信じていますが、まだ確認していません。確実にわかったら、回答として投稿します。
何が起こっているのかは、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を新しいOverlayParent()と等しくなるように変更すると、継承が機能し、例外は発生しません。this.SetMap(map)は関数ではありません。
誰かがこれに対する既成の解決策を持っているなら、私はリンクをいただければ幸いですが、私はこのDOMベースのオンデマンドJavascriptに似た解決策を追求しています
私はJavaScriptを初めて使用しますが、非常に経験豊富なプログラマーであり、これに困惑しています。私はこれに数日間取り組んできましたが、ほとんど進展はありませんでした。最新のバージョンでは、 Google Maps JavaScript APIv3CustomOverlayからほぼ正確にコードをコピーしています。OverlayViewの関連ドキュメントには、「オーバーレイのプロトタイプを新しいOverlayView.prototypeに設定して、このクラスから継承する必要があります」と記載されています。私が経験している問題は、GoogleMapsAPIに固有のものではないと思います。これがコードです。
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;
火災のバグは、proto変数が設定されていないことを示しています。したがって、継承は行われていません。私はもともとGWTJSNI関数を介してコンストラクターを呼び出していましたが、方程式のその部分を排除するために、渡すパラメーターが適切であることを確認するために2番目のテスト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);
}
最後の行をコメントアウトすると、米国地質調査所の地図を使用して、南西マーカーと北東マーカーの間に地図が正しく表示されます。私の実際の要件は、テーブルdivにテキストを表示することですが、可能な限り模倣するために、マップスキャンに置き換えました。
プロトタイプの継承に関する多くの投稿を読んだことがあり、それが些細なことではないことは理解していますが、私が試したことはこれ以上近づいていません。IE 8でも、firefoxと同じ動作をします。あなたが提供できるアドバイスは大歓迎です、私はアイデアを使い果たしています。