1. 程式人生 > >原創:flash製作google地圖檢視器

原創:flash製作google地圖檢視器

 

安裝Adobe Flash CS4 Professional 

配置google地圖支援,下載google開發外掛http://maps.googleapis.com/maps/flash/release/sdk.zip

在C:/Program Files/Adobe/Adobe Flash CS4/Common/Configuration/Components目錄下新建一個google目錄

把外掛壓縮包裡面的map_1_18.swc複製到google目錄

要在你的網站上顯示地圖你需要有個google地圖api介面,

可以到http://code.google.com/intl/nl/apis/maps/signup.html

去申請,

會讓你輸入你的網站然後自動生成一個Google Maps API Key檔案

這個檔案後面會用到

 

然後新建一個as 3.0

 

進去後預設flash的背景大小為550*400

為新建的檔案命名為google_maps.fla

在庫裡面我們會看到先前配置的google maps外掛,把它拖入到我們的舞臺中央就可以了

 

 

然後開啟時間軸,給時間軸的層重新命名為actions,

 

 

然後點選時間軸的第一幀右鍵動作,輸入下面程式碼

 

    import com.google.maps.LatLng;  

import com.google.maps.Map;  

import com.google.maps.Map3D;  

import com.google.maps.MapEvent;  

import com.google.maps.MapType;  

import com.google.maps.View;  

import com.google.maps.geom.Attitude;  

import com.google.maps.controls.NavigationControl;  

import com.google.maps.controls.MapTypeControl;  

import com.google.maps.controls.OverviewMapControl;  

 

// Variables  

var map:Map3D;  

 

// Call the function to create the map  

add_map();  

 

// Function that adds the map on stage  

function add_map()  

{  

    map = new Map3D();  

        map.key = 'abcdefg';  //你申請到的google maps key

    map.setSize(new Point(stage.stageWidth, stage.stageHeight));  

        map.addEventListener(MapEvent.MAP_READY, onMapReady);  

        this.addChild(map);  

}  

 

// Function that will fire once map is created  

function onMapReady(event:MapEvent):void  

{  

    map.setCenter(new LatLng(31.085485, 121.253597), 13);  //這裡是你要顯示的座標

    map.viewMode = View.VIEWMODE_PERSPECTIVE;  

    map.setAttitude(new Attitude(20,40,0));  

    map.addControl(new MapTypeControl());  

        map.addControl(new OverviewMapControl());  

        map.addControl(new NavigationControl());  

}  

 

儲存一下

然後測試flash

 

完成後就會看到下面的效果

 

可以把這個生成好的flash放到網站也可以自己重新編寫一個html格式的頁面

 

下面是單獨做個html網站

 

<!DOCTYPE html "-//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"/>  

    <title>Google Maps JavaScript API Example</title>  

    <script src="http://ditu.google.cn/maps?file=api&v=2&key=abcdefg&sensor=true_or_false"  

            type="text/javascript"></script>  //用google maps api生成的指令碼寫入到網站頁面

    <script type="text/javascript">  

 

    function initialize() {  

      if (GBrowserIsCompatible()) {  

        var map = new GMap2(document.getElementById("map_canvas"));  

        map.setCenter(new GLatLng(31.085485, 121.253597), 13);  //自己定義座標位置

      }  

    }  

 

    </script>  

  </head>  

  <body onload="initialize()" onunload="GUnload()">  

    <div id="map_canvas" style="width: 500px; height: 300px"></div>  

  </body>  

</html>

 

技術交流qq:305142598