parpue.net » googlemaps http://parpue.net Flash, Flex, デザイン等自分の好きなことを好きなようにやってます Wed, 12 Aug 2009 17:46:04 +0000 http://wordpress.org/?v=2.9.2 ja hourly 1 マッシュアップ地図アルバムを作ってみる[Flickr+GoogleMaps+Flash] http://parpue.net/web/1070 http://parpue.net/web/1070#comments Sun, 19 Jul 2009 20:53:13 +0000 okm http://parpue.net/?p=1070 title

ちょっと前にas3flickrlibを使ってFlickrの緯度経度情報の取り方を調べた。

緯度経度情報が取れたのなら、やることはひとつ、
GoogleMaps上に表示だ。
さっそくGoogleMaps Flash API のリファレンスを見ながらしこしこ作ってみた。

以前の記事の下北GPSログの情報を流用した。

マーカーをクリックで該当箇所の画像が見られる。
地図上のラインは、KMLから緯度経度ルート情報を作成した、
外部ファイルから取得している。
リストはこんな感じ。
突貫で作ったので、今度余裕があったらコレをオサレ化してみようと思う。

Google API Key、 Flickr API Keyは伏せたソース一覧↓
＊以下のファイル他、as3flickrlibにちょっと手をいれてます。

GPSPhoto.as(メイン)

>>text
ACTIONSCRIPT:
  1. package {
  2. import com.adobe.webapis.flickr.PhotoSet;
  3. import com.google.maps.LatLng;
  4. import flash.display.Sprite;
  5. import flash.events.Event;
  6. import flash.events.IOErrorEvent;
  7. import flash.net.URLLoader;
  8. import flash.net.URLRequest;
  9.  
  10. public class GPSPhoto extends Sprite
  11. {
  12. private var csvURL:String = "shimokita.csv";
  13. private var setid:String = "72157620666800332";
  14.  
  15. private var gpsLoader:URLLoader;
  16. private var map:Gmap;
  17. private var flcon:FlickerConnector;
  18. private var flickrImageList:Array;
  19. private var photoSet:PhotoSet;
  20.  
  21. public function GPSPhoto()
  22. {
  23. // パラメータでGPSリストとPhotoSetのID取得
  24. if(loaderInfo.parameters.propertyIsEnumerable("csvURL")) this.csvURL = loaderInfo.parameters["csvURL"];
  25. if(loaderInfo.parameters.propertyIsEnumerable("setid")) this.csvURL = loaderInfo.parameters["setid"];
  26.  
  27. stage.align = "TL";
  28. stage.scaleMode = "noScale";
  29. map = new Gmap(750,600,this.mapReadyHandler);
  30. map.onMarkerClick = this.onMarkerClickHandler;
  31. this.addChild(map);
  32. }
  33.  
  34. private function mapReadyHandler(event:Event):void{
  35. var url:String = csvURL;
  36. var request:URLRequest = new URLRequest(url);
  37. gpsLoader = new URLLoader(request);
  38. gpsLoader.addEventListener(Event.COMPLETE, loadCompleteHandler);
  39. gpsLoader.addEventListener(IOErrorEvent.IO_ERROR, ioErrorHandler);
  40.  
  41. flcon = new FlickerConnector;
  42. flcon.onFail = this.onFlickrFailHandler;
  43. flcon.onGetInfo = this.onGetInfoHandler;
  44. flcon.onGetPhotos = this.onGetPhotosHandler;
  45.  
  46. flcon.getInfo(setid);
  47. }
  48.  
  49. private function onMarkerClickHandler(id:String):void{
  50. for(var i:Number = 0; this.flickrImageList.length; i++){
  51. var image:FlickrImage = flickrImageList[i];
  52. if(image.id == id){
  53. this.map.showPhoto(image.width_m, image.height_m, new LatLng(parseFloat(image.latitude), parseFloat(image.longitude)), image.title, image.url_m);
  54. break;
  55. }
  56. }
  57. }
  58.  
  59. private function loadCompleteHandler(event:Event):void{
  60. var lineGeoCSV:String = String(gpsLoader.data);
  61. var geoList:Array = lineGeoCSV.split(" ");
  62. var pointList:Array = new Array;
  63. for(var i:Number=0; i
  64. if(String(geoList[i])=="") continue;
  65. var infos:Array = String(geoList[i]).split(",");
  66. pointList.push(new LatLng(infos[1], infos[0]));
  67. }
  68. map.drawPolyline(pointList);
  69. }
  70.  
  71. private function onGetInfoHandler(photoset:PhotoSet):void {
  72. this.photoSet = photoSet;
  73. this.flcon.getPhotos(this.setid);
  74. }
  75.  
  76. // 画像一覧情報ロードの完了
  77. private function onGetPhotosHandler(flickrImageList:Array):void {
  78. this.flickrImageList = flickrImageList;
  79.  
  80. /*　次への布石
  81. for (var i:Number = 0; i <flickrImageList.length; i++) {
  82. var image:FlickrImage = flickrImageList[i];
  83. this.addChild(image.image);
  84. }*/
  85.  
  86. map.drawMarkers(flickrImageList);
  87. }
  88.  
  89. private function onFlickrFailHandler():void {
  90. // (^-^;;
  91. }
  92.  
  93. private function ioErrorHandler(event:IOErrorEvent):void{
  94. // (^-^;;
  95. }
  96. }
  97. }

Gmap.as 地図管理用

>>text
ACTIONSCRIPT:
  1. package
  2. {
  3. import com.google.maps.InfoWindowOptions;
  4. import com.google.maps.LatLng;
  5. import com.google.maps.Map;
  6. import com.google.maps.MapEvent;
  7. import com.google.maps.MapMouseEvent;
  8. import com.google.maps.controls.MapTypeControl;
  9. import com.google.maps.controls.ZoomControl;
  10. import com.google.maps.overlays.Marker;
  11. import com.google.maps.overlays.MarkerOptions;
  12. import com.google.maps.overlays.Polyline;
  13. import com.google.maps.overlays.PolylineOptions;
  14. import com.google.maps.styles.FillStyle;
  15. import com.google.maps.styles.StrokeStyle;
  16.  
  17. import flash.display.Sprite;
  18. import flash.geom.Point;
  19. import flash.text.StyleSheet;
  20.  
  21. /**
  22. * ...
  23. * @author okm
  24. */
  25. public class Gmap extends Sprite
  26. {
  27. private var map:Map;
  28. private var markerList:Array;
  29.  
  30. public var onReady:Function;
  31. public var onMarkerClick:Function;
  32.  
  33. public function Gmap(width:Number,height:Number, onReady:Function)
  34. {
  35. this.onReady = onReady;
  36.  
  37. markerList = new Array;
  38.  
  39. map = new Map;
  40. map.addEventListener(MapEvent.MAP_READY, onReady);
  41. map.key = "Google Maps APIキー";
  42. map.addControl(new MapTypeControl());
  43. map.addControl(new ZoomControl());
  44. map.setSize(new Point(width, height));
  45.  
  46. this.addChild(map);
  47. }
  48.  
  49. public function drawPolyline(pointList:Array):void{
  50. var polyline:Polyline = new Polyline(
  51. pointList,
  52. new PolylineOptions({ strokeStyle: new StrokeStyle({
  53. color: 0x6481F5,
  54. thickness: 4,
  55. alpha: 0.7})
  56. }));
  57. this.map.addOverlay(polyline);
  58. this.map.setCenter(pointList[0],17);
  59. }
  60.  
  61. public function drawMarkers(flickrImageList:Array):void{
  62. for(var i:Number = 0; i <flickrImageList.length; i++){
  63. var image:FlickrImage = flickrImageList[i];
  64. var marker:Marker = new Marker(new LatLng(parseFloat(image.latitude), parseFloat(image.longitude)),
  65. new MarkerOptions({
  66. strokeStyle: new StrokeStyle({color: 0x666666}),
  67. fillStyle: new FillStyle({color: 0x6481F5, alpha: 0.8}),
  68. radius: 12,
  69. hasShadow: true
  70. }));
  71. marker.addEventListener(MapMouseEvent.CLICK, onMarkerClickHandler, false, 1, true);
  72. this.markerList.push({id:image.id, marker:marker});
  73. this.map.addOverlay(marker);
  74. }
  75. }
  76.  
  77. private function onMarkerClickHandler(event:MapMouseEvent):void{
  78. for(var i:Number = 0; i <markerList.length; i++){
  79. if(markerList[i].marker == event.target){
  80. if(this.onMarkerClick != null) this.onMarkerClick(markerList[i].id);
  81. continue;
  82. }
  83. }
  84. //map.panTo(event.target.getLatLng()); //マーカー座標へ移動
  85. }
  86.  
  87. public function showPhoto(width:Number, height:Number, latlng:LatLng, title:String, imageUrl:String):void {
  88. var style:StyleSheet = new StyleSheet();
  89.  
  90. var heading:Object = new Object();
  91. heading.fontWeight = "bold";
  92. heading.color = "#FF0000";
  93.  
  94. var body:Object = new Object();
  95. body.fontStyle = "italic";
  96. body.textAlign = "center";
  97.  
  98. style.setStyle(".heading", heading);
  99. style.setStyle("body", body);
  100.  
  101. // インフォウィンドウ　オープン
  102. map.openInfoWindow(latlng, new InfoWindowOptions( { width:width+20, height:height+35,hasCloseButton: true, contentHTML:"<span class="heading">"+title+"</span>
  103. <img src="&quot;+imageUrl+&quot;" alt="" />", contentStyleSheet:style, hasTail:false}));
  104. }
  105.  
  106. }
  107. }

FlickerConnector.as Flickr管理用

>>text
ACTIONSCRIPT:
  1. package
  2. {
  3. import com.adobe.webapis.flickr.events.FlickrResultEvent;
  4. import com.adobe.webapis.flickr.FlickrService;
  5. import com.adobe.webapis.flickr.methodgroups.Photos;
  6. import com.adobe.webapis.flickr.methodgroups.PhotoSets;
  7. import com.adobe.webapis.flickr.Photo;
  8. import flash.display.Loader;
  9. import flash.display.LoaderInfo;
  10. import flash.display.Sprite;
  11. import flash.events.Event;
  12. import flash.events.IOErrorEvent;
  13. import flash.net.URLLoader;
  14. import flash.net.URLRequest;
  15. import flash.text.TextField;
  16.  
  17. /**
  18. * ...
  19. * @author okm
  20. */
  21. public class FlickerConnector
  22. {
  23. private var fls:FlickrService;
  24. private var photos:Photos;
  25. private var photoSets:PhotoSets;
  26. private var photoIndex:Number = 0;
  27.  
  28. private var _imageList:Array;
  29. private var _thumnailList:Object;
  30.  
  31. private var imageLoader:Loader; // 画像ローダ
  32.  
  33. public var onGetPhotos:Function;
  34. public var onGetInfo:Function;
  35. public var onFail:Function;
  36.  
  37. public function FlickerConnector()
  38. {
  39. this._imageList = new Array;
  40.  
  41. fls = new FlickrService("Flickr API キー");
  42.  
  43. photoSets = new PhotoSets(fls);
  44.  
  45. fls.addEventListener(FlickrResultEvent.PHOTOSETS_GET_PHOTOS, GetPhptosComplete)
  46. fls.addEventListener(FlickrResultEvent.PHOTOSETS_GET_INFO, GetInfoComplete)
  47.  
  48. }
  49.  
  50. public function getPhotos(setid:String):void{
  51. photoSets.getPhotosExtras(setid);
  52. }
  53.  
  54. public function getInfo(setid:String):void {
  55. photoSets.getInfo(setid);
  56. }
  57.  
  58. // 写真情報取得完了
  59. private function GetPhptosComplete(e:FlickrResultEvent):void {
  60. if (!e.success &amp;&amp; this.onFail != null) onFail();
  61.  
  62. //photoSetの写真のタイトルとURLを配列に格納
  63. for (var i:uint; i &lt;e.data.photoSet.photos.length ; i++) {
  64. var flickrImage:FlickrImage = new FlickrImage(e.data.photoSet.photos[i]);
  65. this._imageList.push(flickrImage);
  66. }
  67.  
  68. if (this.onGetPhotos != null) this.onGetPhotos(this._imageList);
  69. //getNextPhoto();
  70. }
  71.  
  72. /* 次への布石
  73. private function getNextPhoto():void {
  74. if (this.photoIndex&gt;= this._imageList.length) {
  75. // ロード完了
  76. if (this.onGetPhotos != null) this.onGetPhotos(this._imageList);
  77. return;
  78. }
  80. var image:FlickrImage = this._imageList[photoIndex];
  82. imageLoader = new Loader();
  84. var imageURLreq:URLRequest = new URLRequest(image.url_t);
  85. var imgInfo:LoaderInfo = imageLoader.contentLoaderInfo;
  86. imgInfo.addEventListener(Event.INIT, onImageInit);
  87. imgInfo.addEventListener(IOErrorEvent.IO_ERROR, onImageIOError);
  88. imageLoader.load(imageURLreq);
  89. }
  90. */
  91.  
  92. private function onImageInit(event:Event):void{
  93. var image:FlickrImage = this._imageList[photoIndex];
  94. image.image = this.imageLoader;
  95. this.photoIndex++;
  96. //getNextPhoto();
  97. }
  98.  
  99. private function onImageIOError(event:Event):void {
  100. if (this.onFail != null) onFail();
  101. }
  102.  
  103. private function GetInfoComplete(e:FlickrResultEvent):void {
  104. if (!e.success &amp;&amp; this.onFail != null) onFail();
  105. if (this.onGetInfo != null) this.onGetInfo(e.data.PhotoSet);
  106. }
  107.  
  108. }
  109.  
  110. }

FlickrImage.as　画像情報オブジェクト

>>text
ACTIONSCRIPT:
  1. package
  2. {
  3. import com.adobe.webapis.flickr.Photo;
  4. import flash.display.DisplayObject;
  5.  
  6. /**
  7. * ...
  8. * @author okm
  9. */
  10. public class FlickrImage
  11. {
  12. public var id:String;
  13. public var title:String;
  14. public var latitude:String;
  15. public var longitude:String;
  16. public var url_m:String;
  17. public var url_t:String;
  18. public var width_t:Number;
  19. public var height_t:Number;
  20. public var width_m:Number;
  21. public var height_m:Number;
  22. public var image:DisplayObject;
  23.  
  24. public function FlickrImage(photo:Photo)
  25. {
  26. this.id = photo.id;
  27. this.title = photo.title;
  28. this.longitude = photo.longitude;
  29. this.latitude = photo.latitude;
  30. this.longitude = photo.longitude;
  31. this.url_m = photo.url_m;
  32. this.url_t = photo.url_t;
  33. this.width_m = photo.width_m;
  34. this.height_m = photo.height_m;
  35. this.width_t = photo.width_t;
  36. this.height_t = photo.height_t;
  37. }
  38. }
  39.  
  40. }
]]> http://parpue.net/web/1070/feed 0 Google ストリートビューで鬼ごっこ http://parpue.net/web/259 http://parpue.net/web/259#comments Mon, 25 Aug 2008 11:07:00 +0000 okm http://parpue.net/?p=259 北海道までライジングサンを見に遊びにいってきました。ただいま！

今回は、現在までのストリートビューのプログラムを組み合わせて、
地図上を複数のキャラクターが動き回るサンプルを作ってみました。

クリックで新しいウィンドウにサンプル表示

一応IEでも確認しましたが、FireFox３環境を激しく推奨。
（IE謎のエラーがたまにでる・・・）

基本は、以前のサンプルの自動で動き回るキャラクターを複数にしただけです。
当たり判定とかも加えてゲームらしくしようかと思ったんですが、そこは挫折しましたｗ

↓以下ソース全部

>>text
JAVASCRIPT:
  1. var lastPanoId = null;         // 最後にいた場所のPanoID
  2. var nowLatLng;
  3. var map;
  4. var streetViewClient;
  5. var streetPanorama;
  6.  
  7. var enemyList = [];
  8. var enemyMarker;
  9.  
  10. var zakoIcon;
  11.  
  12. // GoogleMapsの初期化
  13. function initMap(lat, lng){
  14.     map = new GMap2(document.getElementById("map"));
  15.     map.disableDragging();
  16.     var ctrlObj = new GMapTypeControl();
  17.     var pos = new GControlPosition(G_ANCHOR_BOTTOM_RIGHT, new GSize(5, 15));
  18.     map.addControl(ctrlObj, pos);
  19.     map.setCenter(new GLatLng(lat, lng), 18);
  20.     initMarker();
  21.     initPanorama(lat, lng);
  22. }
  23.  
  24. function initMarker(){
  25.     zakoIcon = new GIcon();
  26.     zakoIcon.image = "./zako_front.gif";
  27.     zakoIcon.iconSize = new GSize(30, 57);
  28.     zakoIcon.iconAnchor = new GPoint(15, 57);
  29. }
  30.  
  31. function initPanorama(lat, lng){
  32.     streetViewClient = new GStreetviewClient;
  33.     streetPanorama = new GStreetviewPanorama(document.getElementById("pano"));
  34.     nowLatLng = new GLatLng(lat, lng);
  35.     streetViewClient.getNearestPanoramaLatLng(nowLatLng, function(latlng){
  36.         if(latlng == null){
  37.             document.getElementById("pano").style.display = "none";
  38.             return;
  39.         }
  40.         nowLatLng = latlng;
  41.         streetPanorama.setLocationAndPOV(nowLatLng, {yaw: 180, pitch: 0, zoom: -1});
  42.  
  43.         GEvent.addListener(streetPanorama,
  44.                            "yawchanged",
  45.                            function(yaw){
  46.                                changeYaw(yaw);
  47.                            });
  48.  
  49.         GEvent.addListener(streetPanorama,
  50.                            "initialized",
  51.                            function(location){
  52.                                panoramaInitialized(location);
  53.                            });
  54.     });
  55.  
  56.     // キャラクタを配置
  57.     enemyOptions = [ { lat:35.661821, lng:139.666685},
  58.              { lat:35.662404, lng:139.665810},
  59.              { lat:35.66215,  lng:139.665270}           
  60.                       ];
  61.     for(i = 0; i <enemyOptions.length; i++){
  62.         var enemy = new Object;
  63.         enemy.lat = enemyOptions[i]["lat"];
  64.         enemy.lng = enemyOptions[i]["lng"];
  65.         enemy.marker = new GMarker(new GLatLng(enemy.lat, enemy.lng),{draggable:false, icon:zakoIcon});
  66.         map.addOverlay(enemy.marker);
  67.     enemy.moveInterval = setInterval("toNextPanorama("+i+")", 2000);
  68.         enemyList[i] = enemy;
  69.     }
  70. }
  71.  
  72. // 次の位置へ移動
  73. function toNextPanorama(enemy_num){
  74.     var enemy = enemyList[enemy_num];
  75.     clearInterval(enemy.moveInterval);
  76.  
  77.     enemy.pt = map.fromLatLngToContainerPixel(new GLatLng(enemy.lat, enemy.lng));
  78. /*
  79.     if(enemy.pt.x> 210 && enemy.pt.x <230 && enemy.pt.y> 192 && enemy.pt.y <270){
  80.         //alert("hit");
  81.     }
  82. */
  83.  
  84.     // 現在の表示位置の緯度経度を取得
  85.     streetViewClient.getNearestPanorama(new GLatLng(enemy.lat, enemy.lng), function(streetData){
  86.         var neighbourCount = streetData.links.length; // 隣接するパノラマの数
  87.         var nextPanoId; // 次に向かうパノラマのID
  88.         if(neighbourCount == 1){
  89.             // 隣接するパノラマが１つだった場合はそこへ移動
  90.             enemy.nextYaw = streetData.links[0].yaw;
  91.             nextPanoId = streetData.links[0].panoId;
  92.         }else{
  93.              while(1){
  94.                  i = Math.floor( Math.random() * neighbourCount );
  95.                  if(enemy.lastPanoId != streetData.links[i].panoId){
  96.                  nextPanoId = streetData.links[i].panoId;
  97.                  enemy.nextYaw = streetData.links[i].yaw;
  98.                  break;
  99.             }
  100.         }
  101.     }
  102.     enemy.lastPanoId = streetData.location.panoId;     // 今いた場所を覚えておく
  103.     streetViewClient.getPanoramaById( nextPanoId,
  104.                                   function(nextStreetData){
  105.  
  106.                                                        enemy.nowLatLng = nextStreetData.location.latlng;
  107.                                                        var pov = streetPanorama.getPOV();
  108.                                                        nowYaw = pov.yaw;
  109.                                                        if(nowYaw> 360) nowYaw -= 360;
  110.                                                        if(Math.abs(nowYaw - enemy.nextYaw)> 180){
  111.                                                                if(nowYaw> enemy.nextYaw) enemy.nextYaw += 360;           
  112.                                                        }
  113.  
  114.                                                                map.removeOverlay(enemy.marker);
  115.                                                                zakoIcon.image = getIconFromYaw(enemy.nextYaw);
  116.                                    enemy.marker = new GMarker(new GLatLng(enemy.nowLatLng.lat(), enemy.nowLatLng.lng()),{draggable:false, icon:zakoIcon});
  117.                                                                map.addOverlay(enemy.marker);
  118.                                    enemy.lat = enemy.nowLatLng.lat();
  119.                                    enemy.lng = enemy.nowLatLng.lng();
  120.                                    enemy.pt = map.fromLatLngToContainerPixel(enemy.nowLatLng);
  121.  
  122. /*
  123.                                    if(enemy.pt.x> 210 && enemy.pt.x <230 && enemy.pt.y> 192 && enemy.pt.y <270){
  124.                                    //alert("hit");
  125.                                    }
  126. */
  127.                                                                enemy.moveInterval = setInterval("toNextPanorama("+enemy_num+")", 2000);
  128.                                                                enemyList[enemy_num] = enemy;
  129.                                       }
  130.                                  );
  131.  
  132.      });
  133. }
  134.  
  135. function getIconFromYaw(yaw){
  136.     gifFile = "./zako_f.gif";
  137.     if( yaw> 360 ) yaw -= 360;
  138.     if( yaw>= 315 || yaw <45  ) gifFile = "./zako_back.gif";
  139.     else if( yaw>= 45 && yaw < 135 ) gifFile = "./zako_right.gif";
  140.     else if( yaw>= 135 && yaw < 225 ) gifFile = "./zako_front.gif";
  141.     else if( yaw>= 225 || yaw <315 ) gifFile = "./zako_left.gif";
  142.     return gifFile;
  143. }
  144.  
  145. function changeYaw(yaw){
  146.     var gifFile;
  147.     if( yaw> 360 ) yaw -= 360;
  148.     if( yaw>= 315 || yaw <45  ) gifFile = "ue.gif";
  149.     else if( yaw>= 45 && yaw < 135 ) gifFile = "migi.gif";
  150.     else if( yaw>= 135 && yaw < 225 ) gifFile = "shita.gif";
  151.     else if( yaw>= 225 || yaw <315 ) gifFile = "hidari.gif";
  152.     document.getElementById("girl").innerHTML = '<img src="'+ gifFile +'" alt="gial"/>';
  153. }
  154.  
  155. function panoramaInitialized(location){
  156.     map.panTo(location.latlng);
  157. }
]]> http://parpue.net/web/259/feed 1 ストリートビューと地図の連携 http://parpue.net/web/249 http://parpue.net/web/249#comments Wed, 13 Aug 2008 11:24:12 +0000 okm http://parpue.net/?p=249 前回は、自動で下北をぐるぐる歩き回らせるのを作りましたが、
今回はストリートビューを自分でマウスで移動させて、地図のほうの位置を変更させるという、
まさに、本家でやれ！なものを作って見ました。
自動でウロウロに比べたら簡単。
動きは本家と変わらないですが、しいて言うならキャラクタが向き変えるところでしょうか。

前回の自動でウロウロと、今回の自分でウロウロ組み合わせると、
ストリートビュー鬼ごっこゲームができそうですね。


↓今回はストリートビューのほうをマウスで操作

ストリートビューの角度の変更イベントが yawchanged、
位置の変更イベントが initialized で得られます。
それに応じて、キャラクターの向きと、地図の位置を変更してやっています。

ソースコード全部

>>text
JAVASCRIPT:
  1. var lastPanoId = null;         // 最後にいた場所のPanoID
  2. var nowLatLng;
  3. var map;
  4. var streetViewClient;
  5. var streetPanorama;
  6.  
  7. // GoogleMapsの初期化
  8. function initMap(lat, lng){
  9.    map = new GMap2(document.getElementById("map"));
  10.    map.disableDragging();
  11.    var ctrlObj = new GMapTypeControl();
  12.    var pos = new GControlPosition(G_ANCHOR_BOTTOM_RIGHT, new GSize(5, 15));
  13.    map.addControl(ctrlObj, pos);
  14.    map.setCenter(new GLatLng(lat, lng), 18);
  15.    initPanorama(lat, lng);
  16. }
  17.  
  18. function initPanorama(lat, lng){
  19.     streetViewClient = new GStreetviewClient;
  20.     streetPanorama = new GStreetviewPanorama(document.getElementById("pano"));
  21.     nowLatLng = new GLatLng(lat, lng);
  22.     streetViewClient.getNearestPanoramaLatLng(nowLatLng, function(latlng){
  23.         if(latlng == null){
  24.             document.getElementById("pano").style.display = "none";
  25.             return;
  26.         }
  27.         nowLatLng = latlng;
  28.         streetPanorama.setLocationAndPOV(nowLatLng, {yaw: 180, pitch: 0, zoom: -1});
  29.  
  30.         GEvent.addListener(streetPanorama,
  31.                            "yawchanged",
  32.                            function(yaw){
  33.                                changeYaw(yaw);
  34.                            });
  35.  
  36.         GEvent.addListener(streetPanorama,
  37.                            "initialized",
  38.                            function(location){
  39.                                panoramaInitialized(location);
  40.                            });
  41.  
  42.  
  43.     })
  44. }
  45.  
  46. function changeYaw(yaw){
  47.     var gifFile;
  48.     if( yaw> 360 ) yaw -= 360;
  49.     if( yaw>= 315 || yaw <45  ) gifFile = "/common/image/ue.gif";
  50.     else if( yaw>= 45 && yaw < 135 ) gifFile = "/common/image/migi.gif";
  51.     else if( yaw>= 135 && yaw < 225 ) gifFile = "/common/image/shita.gif";
  52.     else if( yaw>= 225 || yaw <315 ) gifFile = "/common/image/hidari.gif";
  53.     document.getElementById("girl").innerHTML = '<img src="'+ gifFile +'" alt="gial"/>';
  54. }
  55.  
  56. function panoramaInitialized(location){
  57.     map.panTo(location.latlng);
  58. }

そういえば、私事ですが、結婚パーティーではここでも書いた、
ビンゴの景品のクジ用のAirアプリを無事プロジェクターで動作させることができました。

ものを作って人に喜んでもらうのは、本当にうれしいですね。

ライブのほうも無事(?)成功しました。
レポートはバンドのホームページのほうに、書こうかなと思います。

ところで、前から開発合宿みたいなものを一度してみたかったんですが、
今度それが叶いそうです。

2泊3日で、どんなものができるのか、このBlogでもレポートしていきたいと思います。8/22~24 の予定。

]]> http://parpue.net/web/249/feed 0 Googleストリートビューでもっと下北をウロウロさせる！ http://parpue.net/web/241 http://parpue.net/web/241#comments Thu, 07 Aug 2008 08:59:34 +0000 okm http://parpue.net/?p=241 前作ったやつを、もうちょっと作りこみ。
曲がるときもっとスムーズに曲がってくれるようにして、歩くスピードをアップ。

ちょっとコレで、ゲームなぞ作ってみようかなーとか。

FlashPlayer9必須みたいです。
環境によってはすごい重いかもしれません。

↓実行サンプルとソース

曲がるときのイージングをJavaScriptのタイマーで強引にやって、
もっとさくさく歩くようにしました。

setInterval で角度をちょっとずつ動かしています。

>>text
JAVASCRIPT:
  1. // onEnterFrame的になめらかに曲がる
  2. function yawPan(){
  3.      var pov = streetPanorama.getPOV();
  4.      if(Math.abs( nowYaw - nextYaw ) <5 ){
  5.          clearInterval(yawInterval);
  6.          moveNextPanorama();
  7.      }else{
  8.          nowYaw += (nextYaw - nowYaw) * 0.2;
  9.          pov.yaw = nowYaw;
  10.          streetPanorama.setPOV(pov);
  11.      }
  12. }

たまに隣のポジションの緯度経度の取得に失敗することがあるようですが、
基本的には、ほっとくとどこまでも歩いていきます。

緯度経度取得に頼らないで、panoIDで隣を取得していくように変えようかしら。

↓以下ソース全部

>>text
JAVASCRIPT:
  1. var lastPanoId = null;         // 最後にいた場所のPanoID
  2. var nowLatLng;
  3. var map;
  4. var streetViewClient;
  5. var streetPanorama;
  6. var nextYaw;      // 次に向かう方向
  7. var nowYaw;
  8.  
  9. var moveInterval; // 移動のインターバル用
  10. var yawInterval;  // 向きを変えてから移動するため
  11. function initMap(lat, lng){
  12.    map = new GMap2(document.getElementById("map"));
  13.    map.disableDragging();
  14.    var ctrlObj = new GMapTypeControl();
  15.    var pos = new GControlPosition(G_ANCHOR_BOTTOM_RIGHT, new GSize(5, 15));
  16.    map.addControl(ctrlObj, pos);
  17.    map.setCenter(new GLatLng(lat, lng), 18);
  18.    initPanorama(lat, lng);
  19. }
  20.  
  21. function initPanorama(lat, lng){
  22.    streetViewClient = new GStreetviewClient;
  23.    streetPanorama = new GStreetviewPanorama(document.getElementById("pano"));
  24.    nowLatLng = new GLatLng(lat, lng);
  25.    streetViewClient.getNearestPanoramaLatLng(nowLatLng, function(latlng){
  26.     if(latlng == null){
  27.         document.getElementById("pano").style.display = "none";
  28.             return;
  29.         }
  30.     nowLatLng = latlng;
  31.         streetPanorama.setLocationAndPOV(nowLatLng, {yaw: 180, pitch: 0, zoom: -1});
  32.  
  33. /* 移動時に手動で変更
  34.     GEvent.addListener(streetPanorama,
  35.                                 "yawchanged",
  36.                                 function(yaw){
  37.                                     changeYaw(yaw);
  38.                                 });       
  39. */
  40.         // 3秒後に移動
  41.         moveInterval = setInterval(toNextPanorama, 2000);
  42.    })
  43.  
  44. }
  45.  
  46. function changeYaw(yaw){
  47.     var gifFile;
  48.     if( yaw> 360 ) yaw -= 360;
  49.     if( yaw>= 315 || yaw <45  ) gifFile = "/common/image/ue.gif";
  50.     else if( yaw>= 45 && yaw < 135 ) gifFile = "/common/image/migi.gif";
  51.     else if( yaw>= 135 && yaw < 225 ) gifFile = "/common/image/shita.gif";
  52.     else if( yaw>= 225 || yaw <315 ) gifFile = "/common/image/hidari.gif";
  53.     document.getElementById("girl").innerHTML = '<img src="'+ gifFile +'" alt="gial"/>';
  54. }
  55.  
  56. // 現在の表示位置から一番近いStreetViewDataを取得し、そこから隣接するパノラマに移動する
  57. function toNextPanorama(){
  58.    clearInterval(moveInterval);
  59.    // 現在の表示位置の緯度経度を取得
  60.    streetViewClient.getNearestPanorama(nowLatLng, function(streetData){
  61.  
  62.         var neighbourCount = streetData.links.length; // 隣接するパノラマの数
  63.  
  64.     var nextPanoId; // 次に向かうパノラマのID
  65.     if(neighbourCount == 1){
  66.             // 隣接するパノラマが１つだった場合はそこへ移動
  67.             nextYaw = streetData.links[0].yaw;
  68.         nextPanoId = streetData.links[0].panoId;
  69.         }else{
  70.            while(1){
  71.                i = Math.floor( Math.random() * neighbourCount );
  72.                if(lastPanoId != streetData.links[i].panoId){
  73.                     nextPanoId = streetData.links[i].panoId;
  74.                     nextYaw = streetData.links[i].yaw;
  75.                     break;
  76.                }
  77.            }
  78.         }
  79.         lastPanoId = streetData.location.panoId;     // 今いた場所を覚えておく
  80.         streetViewClient.getPanoramaById( nextPanoId,
  81.                                           function(nextStreetData){
  82.                                               nowLatLng = nextStreetData.location.latlng;
  83.                                               var pov = streetPanorama.getPOV();
  84.                                               nowYaw = pov.yaw;
  85.                                               if(nowYaw> 360) nowYaw -= 360;
  86.                                               if(Math.abs(nowYaw - nextYaw)> 180){
  87.                                                   if(nowYaw> nextYaw) nextYaw += 360;
  88.                                                   else nowYaw += 360;
  89.                                               }
  90.                                               yawInterval = setInterval(yawPan, 100);
  91.  
  92.                                           }
  93.                                          );
  94.    }
  95.    );
  96. }
  97.  
  98. // onEnterFrame的になめらかに曲がる
  99. function yawPan(){
  100.      var pov = streetPanorama.getPOV();
  101.      if(Math.abs( nowYaw - nextYaw ) <5 ){
  102.          clearInterval(yawInterval);
  103.          moveNextPanorama();
  104.      }else{
  105.          nowYaw += (nextYaw - nowYaw) * 0.2;
  106.          pov.yaw = nowYaw;
  107.          streetPanorama.setPOV(pov);
  108.      }
  109. }
  110.  
  111. function moveNextPanorama(){
  112.     clearInterval(yawInterval);
  113.     // さらに次のポイントへ移動へ
  114.     map.panTo(nowLatLng);
  115.  
  116.     // 移動
  117. 　　changeYaw(nextYaw);
  118.     streetPanorama.followLink(nextYaw);
  119.     moveInterval = setInterval(toNextPanorama, 1500);
  120. }
]]> http://parpue.net/web/241/feed 0 Googleストリートビューで勝手に下北沢周辺を散歩するやつ作ってみた http://parpue.net/web/196 http://parpue.net/web/196#comments Wed, 06 Aug 2008 09:59:44 +0000 okm http://parpue.net/?p=196

Googleストリートビュー、日本地域も対応して、にぎやかな事になってますね。
自分の住んでるところとか、なつかしのあの場所とか見ると本当におもしろい！

周囲を360度パノラマで見ることができることにもびっくりです。

というわけで、さっそくGoogleMapsと、このストリートビューを使って、
下北界隈を勝手に散歩するようなものを作ってみた。

↓以下続き

画像は、マウスドラッグやアイコンクリックで回転することができます。
キャラクタが向いている方向が、表示されている画像の方向です。
移動については制御不能です。勝手に散歩し続けます。

まだリファレンスの日本語化ができていないようなので、
→http://code.google.com/intl/en/apis/maps/documentation/reference.html　
を読みながら作ってみました。

独特な関数が多かったですが、作ってて面白かったです。

今回目をつけたのが、GStreetviewDataクラスのlinkパラメータ。
「Array of GStreetviewLink」
Links to neighbouring panoramas, if any. (Since 2.104)

とあり、お隣のパノラマ画像がある位置の情報が取れるようです。

あとは迷路プログラムのような感じで作り上げました。

現在位置から移動できる隣接のポイントを取得
　↓
取得したもののうち、前いたポイントではないものを選択して移動

コレを繰り返すことによって、
直線を進み、交差点ではランダムに曲がります。

以下ソースコード全文です。initMap(緯度、経度)でお散歩スタートです。

>>text
JAVASCRIPT:
  1. var lastPanoId = null;         // 最後にいた場所のPanoID
  2. var nowLatLng;
  3. var map;
  4. var streetViewClient;
  5. var streetPanorama;
  6. var moveInterval;
  7.  
  8. function initMap(lat, lng){
  9.    map = new GMap2(document.getElementById("map"));
  10.    map.disableDragging();
  11.    var ctrlObj = new GMapTypeControl();
  12.    var pos = new GControlPosition(G_ANCHOR_BOTTOM_RIGHT, new GSize(5, 15));
  13.    map.addControl(ctrlObj, pos);
  14.    map.setCenter(new GLatLng(lat, lng), 18);
  15.    initPanorama(lat, lng);
  16. }
  17.  
  18. function initPanorama(lat, lng){
  19.    streetViewClient = new GStreetviewClient;
  20.    streetPanorama = new GStreetviewPanorama(document.getElementById("pano"));
  21.    nowLatLng = new GLatLng(lat, lng);
  22.    streetViewClient.getNearestPanoramaLatLng(nowLatLng, function(latlng){
  23.        if(latlng == null){
  24.            document.getElementById("pano").style.display = "none";
  25.            return;
  26.        }
  27.        nowLatLng = latlng;
  28.        streetPanorama.setLocationAndPOV(nowLatLng, {yaw: 180, pitch: 0, zoom: -1});
  29.  
  30.        GEvent.addListener(streetPanorama,
  31.                           "yawchanged",
  32.                           function(yaw){
  33.                               changeYaw(yaw);
  34.                           });
  35.  
  36.         // 3秒後に移動
  37.         moveInterval = setInterval(toNextPanorama, 3000);
  38.    })
  39. }
  40.  
  41. function changeYaw(yaw){
  42.     var gifFile;
  43.     if( yaw>= 315 || yaw <45  ) gifFile = "/common/image/ue.gif";
  44.     else if( yaw>= 45 && yaw <135 ) gifFile = "/common/image/migi.gif";
  45.     else if( yaw>= 135 && yaw <225 ) gifFile = "/common/image/shita.gif";
  46.     else if( yaw>= 225 || yaw <315 ) gifFile = "/common/image/hidari.gif";
  47.     document.getElementById("girl").innerHTML = '<img src="'+ gifFile +'" alt="gial"/>';
  48. }
  49.  
  50. // 現在の表示位置から一番近いStreetViewDataを取得し、そこから隣接するパノラマに移動する
  51. function toNextPanorama(){
  52.     clearInterval(moveInterval);
  53.     // 現在の表示位置の緯度経度を取得
  54.     streetViewClient.getNearestPanorama(nowLatLng, function(streetData){
  55.         var neighbourCount = streetData.links.length; // 隣接するパノラマの数
  56.  
  57.         var nextYaw; // 次に向かう方向
  58.         var nextPanoId; // 次に向かうパノラマのID
  59.         if(neighbourCount == 1){
  60.             // 隣接するパノラマが１つだった場合はそこへ移動
  61.             nextYaw = streetData.links[0].yaw;
  62.             nextPanoId = streetData.links[0].panoId;
  63.         }else{
  64.             while(1){
  65.                i = Math.floor( Math.random() * neighbourCount );
  66.                if(lastPanoId != streetData.links[i].panoId){
  67.                     nextPanoId = streetData.links[i].panoId;
  68.                     nextYaw = streetData.links[i].yaw;
  69.                     break;
  70.                }
  71.            }
  72.         }
  73.         lastPanoId = streetData.location.panoId;     // 今いた場所を覚えておく
  74.         streetViewClient.getPanoramaById( nextPanoId,
  75.                                           function(nextStreetData){
  76.                                               nowLatLng = nextStreetData.location.latlng;
  77.                                               // 目的地へGO！
  78.                                               //streetPanorama.setLocationAndPOV( nowLatLng, {yaw:nextYaw, pitch:0, zoom:-1});
  79.                                               streetPanorama.followLink(nextYaw);
  80.                                               map.panTo(nowLatLng);
  81.                                               //streetPanorama.setPOV({yaw:nextYaw, pitch:0, zoom:-1});
  82.                                               moveInterval = setInterval(toNextPanorama, 3000);
  83.                                           }
  84.                                          );
  85.    }
  86.    );
  87. }

ちなみにコレを応用したものを millon でも利用してみました。

]]> http://parpue.net/web/196/feed 1 FlashDevelop で GoogleMaps API for Flash http://parpue.net/web/94 http://parpue.net/web/94#comments Wed, 23 Jul 2008 07:27:33 +0000 okm http://parpue.net/?p=94 Google Maps API for FlashがGoogleから出てた。(結構前にｗ）

Google Maps API が Flash からも使用できるようになりました

リファレンスも整っています。
http://code.google.com/intl/ja/apis/maps/documentation/flash/reference.html
というわけで早速（？）、ただ、表示してみた。


↑Flashです。

とりあえずただ、表示してみただけだと、JavaScript版と何も変わらないので、
Flashらしく（？）まわしてみた。

いらっとしますねーコレｗ
回りながらも地図操作受け付けます。すげー。

とりあえずFlashDevelopで使うに当たって↓

http://code.google.com/intl/ja/apis/maps/documentation/flash/index.html

ここから「the Google Maps API for Flash SDK」をダウンロードします。

sdk.zip内のlibフォルダをFLashDevelopで作ったAS3プロジェクトのフォルダ内にコピーします。

次に、libフォルダ内の「map_flex_1_5.swc」をプロジェクトのプロパティから、
SWC Include Liblariesにlib/map_flex_1_5.swcを追加します。

swc

これでGoogleMaps関連のライブラリが読み込まれ、コード補完もされるようになります。

GoogleMapsを表示できるFlashを生成できますしたが、動かすためには、
Flash配置タグ内に　動かすサーバのドメインに対応するAPIKeyを記述しなければなりません。
>FlashVars key=API Key(ランダム文字列）/<こんなの。
しかも、API取得時に指定したドメイン上に配置しないと、、、動かせない。

これが非常にめんどくさい！パブリッシュしてすぐ確認できないなんて！！
仕方ないので、パブリッシュ→アップロード→確認。めんどー・・・。
GoogleMaps For Flash の最大の壁な気がする。
（だからしばらくさわらなそー・・・）

以下、GoogleMapsを読み込んでぐるぐる回すののソース

GMapTest.as

>>text
ACTIONSCRIPT:
  1. package src {
  2.     import flash.display.Sprite;
  3.     import flash.events.Event;
  4.     import flash.geom.Point;
  5.  
  6.     public class GmapTest extends Sprite {
  7.         private var mymap:MyMap;
  8.         public function GmapTest() {
  9.             mymap = new MyMap;
  10.             mymap.setSize(new Point(400, 300));
  11.             addChild(mymap);
  12.             mymap.x = -200;
  13.             mymap.y = -150;
  14.             this.x = 200;
  15.             this.y = 150;
  16.             addEventListener(Event.ENTER_FRAME, gmapOnEnter);
  17.         }
  18.        
  19.         private function gmapOnEnter(evnet:Event):void{
  20.             this.rotation += 3;
  21.         }   
  22.     }
  23. }

MyMap.as

>>text
ACTIONSCRIPT:
  1. package src {
  2.     import com.google.maps.controls.MapTypeControl;
  3.     import com.google.maps.controls.PositionControl;
  4.     import com.google.maps.controls.ZoomControl;
  5.     import com.google.maps.LatLng;
  6.     import com.google.maps.Map;
  7.     import com.google.maps.MapEvent;
  8.     import com.google.maps.MapType;
  9.        
  10.     public class MyMap extends Map {   
  11.         public function MyMap() {
  12.             super();
  13.             addEventListener(MapEvent.MAP_READY, onMapReady);
  14.         }
  15.        
  16.         private function onMapReady(event:MapEvent):void {
  17.             addControl(new MapTypeControl);
  18.             addControl(new ZoomControl);
  19.             addControl(new PositionControl);
  20.             setCenter(new LatLng(35.67431, 139.69082), 14, MapType.NORMAL_MAP_TYPE);
  21.         }
  22.     }
  23. }
]]> http://parpue.net/web/94/feed 0 GoogleMaps にカスタムウィンドウを表示する。 http://parpue.net/web/71 http://parpue.net/web/71#comments Wed, 23 Jul 2008 07:26:47 +0000 okm http://parpue.net/?p=71 ここで書いた記事の転載と、補足

Google Maps API には、InfoWindowという、
地図上にウィンドウを表示するための機能が備わっています。

このウィンドウは地図上に情報を表示する分には、
十分な機能を持っています。

しかしmillon.jpで使用するにあたって、サイトのイメージと
表示されるウィンドウのイメージが若干合わなかったため、
自分でデザインしたウィンドウを表示しました。
g1
google maps のinfowindow
自分でつくったウィンドウ
自分で作ったウィンドウを表示

GoogleMaps は画像やHTML要素を、オーバーレイ要素として
地図上に貼り付けることができます。

その機能を用いて、DIV要素を独自のウィンドウとしてGoogleMaps上に貼り付けます。

実行テスト

カスタムウィンドウの表示のための手順ですが、
まずは地図や、カスタムウィンドウとして表示するDIVを準備しておきます。

>>text
HTML:
  1. <div style="position:relative">
  2. <div id="map" style="width:400px;height:400px;">
  3. </div>
  4. <div id="ci_div" style="position:absolute;width:100px;height:100px;border:solid 1px;background-color:#FFF;">カスタムウィンドウです！</div>
  5. </div>

* ピクセル位置でカスタムウィンドウの位置を指定する必要があるため、
一番外側を position="relative"を指定したDIVで囲む必要があります。

GoogleMaps APIで定義されているGOverLayインターフェースを実装したクラスを作成します。
このクラスのインスタンスをaddOverlayすることで、
GoogleMap上にオーバーレイとして貼り付けることができます。

>>text
JAVASCRIPT:
  1. // 地図の表示
  2.     map = new GMap2(document.getElementById("map"));
  3.     map.setCenter(new GLatLng(35.67431, 139.69082),13);
  4.  
  5.     // オーバーレイ用のDIV
  6.     var customInfoDIV = document.getElementById("ci_div");
  7.     // GOverlayインターフェースを実装するcustomBoxクラスを作成
  8.     function customBox(){}
  9.     customBox.prototype = new GOverlay();
  10.     customBox.prototype.initialize = function(map){
  11.         // GoogleMap上に定義されているPaneのうち、マーカーと同じ高さに
  12.         // カスタムウィンドウ用のDIVを追加。
  13.         map.getPane(G_MAP_MARKER_PANE).appendChild(customInfoDIV);
  14.         customInfoDIV.style.zIndex = 300000;
  15.     }
  16.     customBox.prototype.remove = function() {
  17.         map.getPane(G_MAP_MARKER_PANE).removeChild(customInfoDIV);
  18.     }
  19.     customBox.prototype.copy = function() {
  20.         return new customBox();
  21.     }
  22.     customBox.prototype.redraw = function(force){}
  23.     // customBoxをオーバーレイとして貼り付ける
  24.     customInfoWindow = new customBox();
  25.     map.addOverlay(customInfoWindow);

GMap2.getPaneでGoogleMaps上で定義されているレイアにアクセスすることができますので、
今回は、マーカーが表示されるレイアと同じ高さにウィンドウが表示されるようにしています。
では、この貼り付けたオーバーレイを操作できる関数を用意して、
InfoWindowのような動きをさせれば完成です。

>>text
JAVASCRIPT:
  1. // 指定位置の緯度経度にウィンドウ表示
  2. function openWindowLatLng(msg, lat, lng){
  3.     var marker_pixls = map.fromLatLngToDivPixel(new GLatLng(lat, lng));
  4.     var x = marker_pixls.x ;
  5.     var y = marker_pixls.y ;
  6.     openWindowXY(msg, marker_pixls.x, marker_pixls.y);
  7. }
  8.  
  9. // 指定のピクセル位置にウィンドウ表示
  10. function openWindowXY(msg, x, y){
  11.    map.removeOverlay(customInfoWindow);
  12.    customInfoDIV.style.display = "block";
  13.    customInfoDIV.style.zIndex = 4000000;
  14.    customInfoDIV.style.postion = "absolute";
  15.    customInfoDIV.style.top = y + "px";
  16.    customInfoDIV.style.left = x + "px";
  17.    customInfoDIV.innerHTML = msg;
  18.    map.addOverlay(customInfoWindow);
  19. }
  20.  
  21. // ウィンドウ閉じる
  22. function closeWindow(){
  23.    map.removeOverlay(customInfoWindow);
  24. }

DIVを装飾してウィンドウとし、好きな位置に表示することができるようになります。

＊ただし、このウィンドウは地図のスクロールには追従しますが、
拡大率が変わった場合には、ピクセル位置の指定が緯度経度とずれてしまいます。
そのため、ズームのイベント時に再表示する必要があります。

]]> http://parpue.net/web/71/feed 0