スマホ対応をする為 userAgent の文字列を内部で使用していますが、StreetViewOnSh メソッドと StreetViewOnPc メソッドの引数としても再度渡しています。さらに、StreetView メソッドで作成した StreetViewPanorama クラスのインスタンスも引数として渡しているので、未実装の処理も追加で簡単に記述できます
<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;
},
StreetViewOnSh: function( callback ) {
var ua = navigator.userAgent.toLowerCase();
if ( ua.indexOf("iphone") > -1 || ua.indexOf("android") > -1 ) {
(callback.bind(this,ua,this.data( "pano" )))();
}
return this;
},
StreetViewOnPc: function( callback ) {
var ua = navigator.userAgent.toLowerCase();
if ( ua.indexOf("iphone") <= -1 && ua.indexOf("android") <= -1 ) {
(callback.bind(this,ua,this.data( "pano" )))();
}
return this;
}
});
$(function(){
$('#pano_40671578')
.StreetView(40.671578,-73.962557)
.StreetViewPov(-128,10)
.StreetViewOnPc( function(userAgent,StreetViewPanorama){
// PC の場合の処理
this.css("width","600px");
this.css("height","400px");
// 追加のブラウザ判定に使用する
console.log(userAgent);
// 実装していない処理は、直接実行
console.log(StreetViewPanorama.getPov())
})
.StreetViewOnSh( function(userAgent,StreetViewPanorama){
// スマホ の場合の処理
this.css("cssText","width:290px!important;height:290px!important");
this.StreetViewZoom(2.5);
// 追加のブラウザ判定に使用する
console.log(userAgent);
// 実装していない処理は、直接実行
console.log(StreetViewPanorama.getZoom())
})
;
// PC と スマホ 共通な場合
$('#pano_40671578_b')
.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")
.css("margin-top","10px")
;
});
</script>
<div id="pano_40671578"></div>
<div id="pano_40671578_b"></div>
スマホの処理として、表示サイズを強制的に変更する為に important を使用していますが、これは jQuery で important 設定する方法としてかなり前から公開されているもので、一度に全ての設定を行う必要があります。
$('#pano_40671578')
.StreetView(40.671578,-73.962557)
.StreetViewPov(-128,10)
.StreetViewOnPc( function(userAgent,StreetViewPanorama){
// PC の場合の処理
this.css("width","600px");
this.css("height","400px");
// 追加のブラウザ判定に使用する
console.log(userAgent);
// 実装していない処理は、直接実行
console.log(StreetViewPanorama.getPov())
})
.StreetViewOnSh( function(userAgent,StreetViewPanorama){
// スマホ の場合の処理
this.css("cssText","width:290px!important;height:290px!important");
this.StreetViewZoom(2.5);
// 追加のブラウザ判定に使用する
console.log(userAgent);
// 実装していない処理は、直接実行
console.log(StreetViewPanorama.getZoom())
})
;
実際問題スマホの環境では、さらに考慮すべき事項や、複雑なサイト環境によっては IFRAME を使わざるを得ない場合があり、簡単に行くとはかぎりませんが、場合を確実に分けて記述できるメリットはあると思います。 関連する記事 jQuery のプラグインとしてストリートビューを利用する (callback.bind(this))(); で、無名 function で使用される this に this を引き継ぐ
|
|
【プラグイン作成(jQuery)の最新記事】
- jQuery の回転アニメーション / $({kakudo: 0}).animate(properties, options )
- HTML 上のデータをローカルに保存する jQuery プラグイン
- jQuery のプラグインで動的なコントロールの処理を作成 : add_button / set_event / set_link
- TD 内のテキストを入力可能にする tableinput.js / jQuery プラグイン
- 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 の仕様について )
