近日有專案,因為是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
0 意見:
張貼留言