ストリートビューオーバーレイを使用したOpenLayers


9

OpenLayers Webアプリにストリートビュー機能を追加しようとしています。ストリートビューの可用性を示すオーバーレイをマップ自体に追加したいと思います。ここで正常に実行される例を確認しましたが、自分のソリューションでコードを機能させることができません。具体的には:

var layer = new OpenLayers.Layer.Google("Google Street", {sphericalMercator: true});

layer.mapObject.addOverlay(new GStreetviewOverlay());

エラーになります:

layer.mapObject is null

誰かが私が間違っているかもしれないという考えを持っていますか?その場合、どうすればこれを修正できますか?

回答:


4

ストリートビューを備えたOpenlayer

GeoExt ux拡張が必要です

すべてのコードが利用可能-不足しているものを確認できます

(もしあなたがあなたの現在の地図へのライブリンクを投稿できれば-ユーザーはあなたのためにそれをデバッグできます。)

ここに画像の説明を入力してください

http://api.geo.admin.ch/main/wsgi/doc/build/api/streetview.html


2
+1-このデモは機能します。それも同じ著者によるものですが、より最近のものです。
geographika

GeoExtを使用せずにOpenLayersでストリートビューオーバーレイレイヤーを使用する他の方法を知っていますか?
CatchingMonkey 2011

Googleマップv2のみ(非推奨)fuzzytolerance.info/code/…APIキーが必要です。
Mapperz

GeoAdminはもうストリートビューを提供していないようだ、私は見つけることができる閉じ、関連する例があった。gxp.opengeo.org/master/examples/google-streetview-panel.html(OpenLayersを+ GeoExt)
kryger

2

Googleレイヤーを使用してライセンス要件を満たすには、Google APIを介してGoogleレイヤーにアクセスする必要があります。OpenLayersマップにGoogleレイヤーを追加すると、OpenLayersがGoogle APIをロードします。

layer.mapObject(とは対照的に、layer.mapどのOLマップオブジェクトをある)あなたのGoogleマップへの参照を与えるべきです。これはnull、Google APIの読み込みに問題があるためです。正しく読み込まれたかどうかをFireBugで確認できます。

ポイントする例は、バージョン3ではなく古いGoogle 2 APIを使用している可能性があります。APIキーは不要になり、以下を使用してGoogle APIに追加できます。

<script src="http://maps.google.com/maps/api/js?sensor=false"></script>

あなたに役立つかもしれないGoogle v3 APIレイヤーユニットテストを見てください。

ストリートビューでもブラウザにFlashが必要であることを覚えておいてください。


こんにちは、あなたの助けに感謝します。私は今私の席にいないので、あなたの提案をテストすることはできませんが、これは私が知っていることです:私は間違いなくGoogle Maps API v3をロードしています。以前にWebアプリにStreetViewを実装しましたが、今度は地図上にもオーバーレイを表示したいと考えています。私はそれがブラウザのものなのかと思っています。私がリンクを提供したWebサイトはIE(8)では正常に動作しますが、Firefoxでは動作しません...何かアイデアはありますか?
CatchingMonkey 2011

デモはFF6、IE8、IE9では機能しません。それだけでマップやストリートビューのいずれかを示しているようだ...
geographika

うーん、IE8でWebサイトが機能しているようです。OpenLayersのユーザーリストも参照してください。
CatchingMonkey

1

layer.mapObjectがnullである理由は、レイヤーがマップに追加された後にmapObjectプロパティが作成されるためです。これを試して:

var layer = new OpenLayers.Layer.Google("Google Street", {sphericalMercator: true});
map.addLayer(layer);
layer.mapObject.addOverlay(new GStreetviewOverlay());
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.