2010年12月20日

Google Maps API for Flash心得分享


近日有專案,因為是flash網站,需要將google map在flash中呈現,花了一些時間才解決,因為我的專業並不是flash as,以下的心得分享,如有錯誤還請見諒!


步驟如下>>
◎ 下載google map 官方提供的組件,並且安裝到你的電腦中
◎ 開啟flash,將組件拖曳到舞台中
◎ 申請google map 金鑰
◎ 撰寫as
◎ 發佈,完成






http://maps.googleapis.com/maps/flash/release/sdk.zip




 



6. 到影格1中,開啟程式面版,複製以下as,貼到你的程式面版中
註一:API金鑰來這邊申請 >>  因為上傳到線上之後,會偵測domain是否相符
註二:如果不要出場效果,移除import com.greensock.*; 以及TweenLite.to(map, 1, {alpha:1,delay:0.5});



//載入greensock
import com.greensock.*;

//載入google map//
import com.google.maps.LatLng;
import com.google.maps.Map;
import com.google.maps.MapEvent;
import com.google.maps.MapType;

//載入左方放大縮小工具//
import com.google.maps.controls.ZoomControl;

//載入左上方移動工具
import com.google.maps.controls.PositionControl;

//載入右上方地圖格式工具
import com.google.maps.controls.MapTypeControl;

//載入地圖目標位置標籤氣球相關設定
import com.google.maps.interfaces.IMap;
import com.google.maps.overlays.Marker;
import com.google.maps.overlays.MarkerOptions;
import com.google.maps.styles.FillStyle;
import com.google.maps.styles.StrokeStyle;
import com.google.maps.InfoWindowOptions;


var map:Map = new Map();

//這段一定要加,沒加會一直出線錯誤訊息,目前還不知道是什麼意思...
map.sensor = "false";

//API 金鑰
map.key = "API KEY";


//地圖寬、高設定
map.setSize(new Point(560, 300));

map.addEventListener(MapEvent.MAP_READY, onMapReady);
this.addChild(map);
map.addEventListener(MapEvent.MAP_READY, onMapReady);

function onMapReady(event:Event):void
{
 //秀出地圖經緯度(官網提供曼哈頓中心)
 map.setCenter(new LatLng(40.736072,-73.992062));
 // 滑鼠滾輪放大縮小地圖
 map.enableScrollWheelZoom();
 //連續放大縮小特效
 map.enableContinuousZoom();
 //秀出左方放大縮小工具
 map.addControl(new ZoomControl());
 //秀出左上方移動工具
 map.addControl(new PositionControl());
 //秀出右上方地圖格式工具
 map.addControl(new MapTypeControl());
 //地圖放大比例預設值(最大17)
 map.setZoom(17);
 
 //顯示地圖目標位置的標籤氣球
 var markerOptions:MarkerOptions = new MarkerOptions(
 { 
 //標籤氣球外框顏色
 strokeStyle: new StrokeStyle({color: 0xffffff, alpha: 1}),
 //標籤氣球色塊顏色
 fillStyle: new FillStyle({color: 0xBAC64F, alpha: 1}),
 //標籤氣球大小
 radius: 12,                   
 //標籤氣球陰影顯示
 hasShadow: true  
    }
 );
 //標籤氣球OVER後顯示的名稱
 markerOptions.tooltip = "HOME!!";
 var marker:Marker = new Marker(map.getCenter(),markerOptions);
 map.addOverlay(marker);


}


//設定位置
map.x = 10;
map.y = 10;

//map預設alpha為0
map.alpha = 0;

//map 淡出(延遲0.5秒)
TweenLite.to(map, 1, {alpha:1,delay:0.5});


應用案例>>
http://www.daf.tw/contact.html
facebook討論

0 意見:

 

One Design Copyright © 2009 BeMagazine Blogger Template is Designed by Blogger Template
In Collaboration with fifa