2008-12-06
GoogleストリートビューをFlash(Flex)でやる方法
地図, Flex, ActionScript3.0 | | 
GoogleストリートビューをFlash(Flex)でやる方法でっす。
こんな感じ。
http://moeten.info/flex/20081206_googlemapStreetTest/
なんかタブブラウザ（スレプニル）だと再描画がうまくいかないね。
簡単な説明
ストリートビューで緯度経度指定@JavaScript
//緯度経度の指定（Flexから呼び出す用）
function setPanorama( lat, lon )
{
panoClient.getNearestPanorama(new GLatLng( lat, lon ), showPanoData );
}
FlexからJavaScriptを呼び出す@Flex
ExternalInterface.call( "setPanorama", event.latLng.lat(), event.latLng.lng() );
簡単な概念図
GoogleストリートビューはFlashなのにJavaScriptを経由しないと遊べないのはちょいめんどい。
今後はおそらくFlexからでも簡単になると思います。
すべてのソースはこちら
Flexのソースはこちら
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="400" height="300" viewSourceURL="srcview/index.html"> <mx:Script> <![CDATA[ import com.google.maps.overlays.Marker; import com.google.maps.controls.MapTypeControl; import com.google.maps.controls.PositionControl; import com.google.maps.controls.ZoomControl; import com.google.maps.InfoWindowOptions; import com.google.maps.MapMouseEvent; import com.google.maps.LatLng; import com.google.maps.Map; import com.google.maps.MapEvent; import com.google.maps.MapType; private var marker : Marker; //マップの作成 private function onMapReady(event:Event):void { var centerLL : LatLng = new LatLng(35.699904,139.772063); map.setCenter( centerLL, 15, MapType.NORMAL_MAP_TYPE); map.addControl(new ZoomControl()); map.addControl(new PositionControl()); map.addControl(new MapTypeControl()); map.addEventListener(MapMouseEvent.CLICK, onMapClick); marker = new Marker( centerLL ); map.addOverlay( marker ); } private function onMapClick(event:MapMouseEvent):void { marker.setLatLng( event.latLng ); textLog.text = "lat:" + event.latLng.lat() +" lng:"+ event.latLng.lng(); //ExternalInterfaceで外部JavaScript関数を呼び出す ExternalInterface.call( "setPanorama", event.latLng.lat(), event.latLng.lng() ); } ]]> </mx:Script> <maps:Map xmlns:maps="com.google.maps.*" id="map" mapevent_mapready="onMapReady(event)" width="100%" height="100%" key="ABQIAAAAq9Z1Z3_S-AQpWPqQe5Gh1RSewzjjB8b2RNte7-OtkajY1gY2mxTRqjGMgjQDRTxAlblhDCnDVpWj2w"/> <mx:TextInput id="textLog" text="" bottom="5" right="5" width="90%"/> </mx:Application>
html(JavaScript)のソースはこちら
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<link rel="stylesheet" type="text/css" href="history/history.css" />
<style> body { margin: 0px; overflow:hidden } </style>
<!--########### マップ ###########-->
<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAq9Z1Z3_S-AQpWPqQe5Gh1RSewzjjB8b2RNte7-OtkajY1gY2mxTRqjGMgjQDRTxAlblhDCnDVpWj2w" type="text/javascript"></script>
<script language="JavaScript" type="text/javascript">
//<![CDATA[
//ストリートビュー初期設定
var panorama;
function load() {
panorama = new GStreetviewPanorama(document.getElementById("pano"));
panorama.setLocationAndPOV(new GLatLng( 35.65897,139.745753 ));
}
//ポイントの指定（Ｆｌｅｘ用）
function setPanorama( lat , lon ) {
panorama.setLocationAndPOV( new GLatLng(lat, lon) );
}
//]]>
</script>
</head>
<body onload="load()" onunload="GUnload()">
<!--######## ストリートビュー用コンテナ（土台） ########-->
<div id="pano" style="width:400px;height:300px;float:left;background-color:#ffccff;" ></div>
<!--######## Flex(Flash)張り付け ########-->
<script src="AC_OETags.js" language="javascript"></script>
<script src="history/history.js" language="javascript"></script>
<script language="JavaScript" type="text/javascript">
//<![CDATA[
var requiredMajorVersion = 9;
var requiredMinorVersion = 0;
var requiredRevision = 124;
var hasProductInstall = DetectFlashVer(6, 0, 65);
var hasRequestedVersion = DetectFlashVer(requiredMajorVersion, requiredMinorVersion, requiredRevision);
if ( hasProductInstall && !hasRequestedVersion ){
var MMPlayerType = (isIE == true) ? "ActiveX" : "PlugIn";
var MMredirectURL = window.location;
document.title = document.title.slice(0, 47) + " - Flash Player Installation";
var MMdoctitle = document.title;
AC_FL_RunContent(
"src", "playerProductInstall",
"FlashVars", "MMredirectURL="+MMredirectURL+'&MMplayerType='+MMPlayerType+'&MMdoctitle='+MMdoctitle+"",
"width", "400px","height", "300px","align", "middle","id", "main","quality", "high","bgcolor", "#869ca7","name", "main",
"allowScriptAccess","all","type", "application/x-shockwave-flash","pluginspage", "http://www.adobe.com/go/getflashplayer"
);
} else if (hasRequestedVersion) {
AC_FL_RunContent(
"src", "main",
"width", "400px","height", "300px","align", "middle","id", "main","quality", "high","bgcolor", "#869ca7","name", "main",
"allowScriptAccess","all","type", "application/x-shockwave-flash","pluginspage", "http://www.adobe.com/go/getflashplayer"
);
} else {
var alternateContent = 'Alternate HTML content should be placed here. '
+ 'This content requires the Adobe Flash Player. '
+ '<a href=http://www.adobe.com/go/getflash/>Get Flash</a>';
document.write(alternateContent);
}
//]]>
</script>
<noscript>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
id="main" width="400px" height="300px"
codebase="http://fpdownload.macromedia.com/get/flashplayer/current/swflash.cab">
<param name="movie" value="main.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#869ca7" />
<param name="allowScriptAccess" value="all" />
<embed src="main.swf" quality="high" bgcolor="#869ca7"
width="400px" height="300px" name="main" align="middle"
play="true"
loop="false"
quality="high"
allowScriptAccess="all"
type="application/x-shockwave-flash"
pluginspage="http://www.adobe.com/go/getflashplayer">
</embed>
</object>
</noscript>
</body>
</html>
コメントを書く
トラックバック - http://d.hatena.ne.jp/haru-komugi/20081206/1228546450
