Hatena::Groupnadesiko

雪乃☆雫のなでしこ日和

2018/06/14 (木)

ストリートビューを表示できるようにしてみたよ!

| 12:58 | ストリートビューを表示できるようにしてみたよ! - 雪乃☆雫のなでしこ日和 を含むブックマーク はてなブックマーク - ストリートビューを表示できるようにしてみたよ! - 雪乃☆雫のなでしこ日和 ストリートビューを表示できるようにしてみたよ! - 雪乃☆雫のなでしこ日和 のブックマークコメント

 またずっと放置してしまった。

 なんにもしてなかったわけでもないけど、ほとんどなんにもしてなかったw

 なでしこ3のwindows版をインストールしようとすると、どうも解凍失敗するとゆう話を前に書きましたが、

https://nadesiko.g.hatena.ne.jp/snowdrops89/20180219/1519013743

 マイナビ連載27目で、のナゾが解明されていました。

https://news.mynavi.jp/article/nadeshiko-27/

 OS標準のZIP解凍ツールでは、ZIPファイルがうまく解凍できないいう問題があるそうです。

 なんとー(´д`;

 7-Zipであっさりできました~。しかも速かった~;;;


 だけど、こんどラズベリーパイに入れてみようとしたらうまくいかないの~(´Д⊂ヽ

 Node.jsを最新版にするの段階だから、なでしこ以前だ・・・


 さて、なでしこの件なのかビミョーなため記事にしてませんでしたが(単に記事かくのめんどーだっただけという話もある;)、あんまり放置しすぎなので、やっぱり書いとく。

 以前グーグルマップと天気予報を表示するのを作りました。

https://nadesiko.g.hatena.ne.jp/snowdrops89/20180306/1520328115

 度は、ストリートビューも出せるようにしてみたよ☆

 コピペで行けそうなのが無かったので、あちこちを参考に、前のマップ表示Javascriptに形式を合わせて、こんな感じ。

//----------------------------------------------------------


//ストリートビュー表示(#svpFieldに表示)
function svpInit(I,K,H,P,Z) {
    var centerPosition = new google.maps.LatLng(I,K);  //座標
    var svpOption = {
        position : centerPosition,  //地図の中心座標
        pov : {
            //(Hはurlのhの値。Pはtから90を引いたものっぽい。)
            heading:H,  //カメラの方角。カメラの北からの相対角度。北が0°、東が90°、南が180°、西は270°。
            pitch:P,    //カメラの角度。ストリートビュー車に対する相対角度。範囲は、90°(上方)から-90°(下方)。
            zoom:Z      //カメラのズームレベル。0で完全にズームアウト。
        }
    };
    //ストリートビュー描画
    var svp = new google.maps.StreetViewPanorama(document.getElementById("svpField"), svpOption);
}
//-----------------------------------------------------------------------
ボタンのスタイル設定
ボタンスタイルは、{
  "font-size": "24px",
  "padding": "0px 10px",
}
「button」にボタンスタイルをDOMスタイル一括設定。

#ボタンのイベント設定
「#sapporo」をクリックした時には、
  地図表示(43.0686605,141.3507548,15,"札幌駅")。
  ビュー表示(43.0686605,141.3507548,70,10,1)。
ここまで。
「#asahikawa」をクリックした時には、
  地図表示(43.7628477,142.3584328,15,"旭川駅")。
  ビュー表示(43.7628477,142.3584328,130,0,0)。
ここまで。
「#hakodate」をクリックした時には、
  地図表示(41.7735356,140.727167,15,"函館駅")。
  ビュー表示(41.7735356,140.727167,240,10,0)。
ここまで。
「#otaru」をクリックした時には、
  地図表示(43.1977717,140.9941033,15,"小樽駅")。
  ビュー表示(43.1977717,140.9941033,250,10,0)。
ここまで。

●地図表示(緯度,経度,縮尺,情報)
 「mapInit({緯度},{経度},{縮尺},"{情報}");」をJS実行。
 緯度と経度で天気予報表示ここまで。
●ビュー表示(緯度,経度,方角,角度,拡大)
 「svpInit({緯度},{経度},{方角},{角度},{拡大});」をJS実行。
ここまで。
#-----------------------------------------------------------
●天気予報表示(緯度と経度で)
 緯度=緯度を文字列変換から5だけ右端削除。
 経度=経度を文字列変換の5だけ右端削除。
 URL=「https://api.openweathermap.org/data/2.5/weather?lat={緯度}&lon={経度}&appid=c19347ddb2f832918f4ad2daca4c2d17&units=metric&lang=ja」

# AjaxAPIにアクセス --- (*2)
 URLにGET送信した時には
  画像URL=「https://openweathermap.org/img/w/」
  対象JSONデコードして、Jに代入。# --- (*3)
  天気=J["weather"][0]["description"]
  気温=J["main"]["temp"]
  湿度=J["main"]["humidity"]
  天気アイコン=J["weather"][0]["icon"]
  日時=J["dt"]を日時変換の16だけ文字左部分。
  場所=J["name"]

  # HTML表示--- (*4)
  天気予報=「{日時}の{場所}の天気
<img src="{画像URL}{天気アイコン}.png" align="middle"> {天気}
気温: {気温}度 / 湿度: {湿度}%」   天気予報を「#weather」にDOM_HTML設定。  ここまで。 ここまで。 #----------------------------------------------------------- ●右端削除(SからAだけ|Sの)  数=Sの文字数。  S=Sの(数-(A-1))からAだけ文字削除。  Sで戻るここまで。 #-----------------------------------------------------------

http://www.geocities.jp/snowdrops890/wnako3_test/14_StreetView.html

トラックバック - http://nadesiko.g.hatena.ne.jp/snowdrops89/20180614