とにかく、ストリートビューは何かと面倒な事が多いので、jQuery の簡潔さでどの程度表現できるかやってみました。
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
$.fn.extend({
StreetView : function(a,b){
var pos = new google.maps.LatLng(a,b);
// jQuery オブジェクトに StreetViewPanorama をセット(後で使用します)
$( this )
.data( "pano",
new google.maps.StreetViewPanorama(
$(this)[0],
{ position: pos }
)
);
// プラグインの戻り値の無い処理の標準仕様として自分自身を返す
return this;
},
// 向き と 上下 の値をセットします
StreetViewPov : function(a,b){
var pov = {
heading: a,
pitch: b
}
// jQuery オブジェクトにセットした StreetViewPanorama を使用しています
$( this ).data( "pano" ).setPov(pov);
// プラグインの戻り値の無い処理の標準仕様として自分自身を返す
return this;
},
// 拡大率をセットします( 0 〜 5 / 小数以下あり )
StreetViewZoom : function(a){
// jQuery オブジェクトにセットした StreetViewPanorama を使用しています
$( this ).data( "pano" ).setZoom(a);
// プラグインの戻り値の無い処理の標準仕様として自分自身を返す
return this;
},
StreetViewOptions( a ) {
// jQuery オブジェクトにセットした StreetViewPanorama を使用しています
$( this ).data( "pano" ).setOptions(a);
// プラグインの戻り値の無い処理の標準仕様として自分自身を返す
return this;
}
});
$(function(){
$('#pano1')
.StreetView(40.671578,-73.962557)
.StreetViewPov(-128,10)
.css("width","600px")
.css("height","400px")
.css("margin-bottom","10px")
$('#pano2')
.StreetView(40.671578,-73.962557)
.StreetViewPov(-106.13,8.69)
.StreetViewZoom(2.65)
.StreetViewOptions({
/* addressControl: false, */
/* zoomControl: false, */
/* panControl: false, */
scrollwheel: false,
disableDefaultUI: true
})
.css("width","600px")
.css("height","480px")
;
});
</script>
<div id="pano1"></div>
<div id="pano2"></div>
Google のサンプルはやたらと、オプションを一括で渡したがるので、とても解りにくいと思っていましたし、固定的で汎用性が無いかもしれませんが、これで十分なのでこのほうがいいかもしれません。▼ ストリートビュー上のコントロールを排除して、マウスホイールによるズームを出来ないようにしています。
StreetViewOptions メソッドは、使用可能なオプションを後から設定しますが、ここで試しているようにいろいろな UI をキャンセルする場合に使用します。 heading と pitch と zoom は、こちらで動かしながら取得できます。画像だけで良い場合もこちらで URL を取得できます( 最後に設定変更ボタン )。Google の API リファレンス StreetViewPanorama class Google Street View Image API StreetViewPanoramaOptions
|
|
【プラグイン作成(jQuery)の最新記事】
- jQuery の回転アニメーション / $({kakudo: 0}).animate(properties, options )
- HTML 上のデータをローカルに保存する jQuery プラグイン
- jQuery のプラグインで動的なコントロールの処理を作成 : add_button / set_event / set_link
- TD 内のテキストを入力可能にする tableinput.js / jQuery プラグイン
- スマホとPC で別の処理を記述できる jQuery のストリートビュープラグイン
- jQuery の簡単なプラグインを $.fn.extend で作成( 0〜9のみ入力可能なフィールド )
- INPUT type="number" の振る舞いをブラウザ間で調整する jQuery プラグイン
- jQuery のプラグイン作成 : 要素のクリックイベントで、画像の実際の縦横サイズちょうどの大きさのウインドウを開いて表示する
- jQuery の回転アニメーションでくるくる回る『実行中アイコン』
- jQuery を使ったCSS 一括エフェクトアニメーション( rotate, skew, borderRadius, boxShadow )
- jQuery : IFRAME 作成プラグインと、アニメーションによる表示切替
- jQuery でかなり実用的かもしれない入力制限( 入力値復帰型 )
- jQuery で、指定文字集合のみ入力可能なプラグイン
- jQuery の fn.extend メソッドと extend メソッド の違いは $(セレクタ) のメソッドとして実行できるかどうか ( extend の仕様について )
