2013年10月20日日曜日

ストリートビュー(static image)にばんてふを適用する謎テクニック

ストビューにばんてふを適用してみた。



ソースコード

javascript


var dokodemo_locations = [
{location_label:'バリンジャー・クレーター',location:'35.03165,-111.026837',heading:160,pitch:0,fov:100},
//(中略)
{location_label:'春日大社',location:'34.681352,135.848498',heading:0,pitch:20,fov:100},
];
var google_api_key="[API KEY]";
var bancho_base_url = "http://m-labo.appspot.com/banchoapi/getimage?frameid=0&png=true&imageurl="
var streetview_image_base_url = "http://maps.googleapis.com/maps/api/streetview?size=500x375&sensor=false&key="+google_api_key;
function initDokodemoBancho() {
  var defaultUrl = getStreetViewUrl(dokodemo_locations[0]);
  $('#dokodemo_bancho').html('<img src="' + bancho_base_url + encodeURIComponent(defaultUrl.street_view_url) + '" width="500px" />');
  var select = $('<select size="1"></select>');
  select.change(function() {
    var street_view_url_= $(this).val();
    $('#dokodemo_bancho').html('<img src="' + bancho_base_url + encodeURIComponent(street_view_url_) + '" width="500px" />');
  });
  $('#dokodemo_bancho_control').append(select);
  for(var i = 0; i < dokodemo_locations.length; i++ ) {
    var urlObj = getStreetViewUrl(dokodemo_locations[i]);
    var option = $('<option value="'+ urlObj.street_view_url+ '">' + urlObj.location_label + '</option>');
    select.append(option);
  }
}
function getStreetViewUrl(location) {
  var location_label;
  var street_view_url = streetview_image_base_url;
  for(var key in location) {
    if(key == 'location_label') {
      location_label=location.location_label;
    }
    street_view_url = street_view_url +'&' + key + '=' + encodeURIComponent(location[key]); 
  }
  var ret = {'location_label':location_label,
              'street_view_url':street_view_url};
  return ret;
}
initDokodemoBancho();

html


<div id="dokodemo_bancho"></div>
<div id="dokodemo_bancho_control"></div>

Google Street View Image API
BanchoAPI:ばんてふフレームAPIを作ったよ。ヨ・ロ・シ・ク

0 件のコメント:

コメントを投稿