天天看點

原創: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  onunload="GUnload()">  

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

  </body>  

</html>

技術交流